How to show Checkbox against each Row based on Column value - JQuery DataTable

Question

I am using below code for showing checkbox in Jquery Datatable.

var table = $('#example').DataTable({
  'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
  'columnDefs': [
     {
        'targets': 0,
        'checkboxes': {
           'selectRow': true
        }
     }
  ],
  'select': {
     'style': 'multi',
     'selector': 'td:first-child'
  },     
  'order': [[1, 'asc']]
  });

https://jsfiddle.net/09yLegu3/

I have a new requirement where i want show checkbox only based on a column value.I have column with name Office.Checkbox should be displayed only if Office value is "Tokyo".How can i achieve this jquery data table. Can anyone help with a sample code.

matthias_h · Accepted Answer · 2020-05-22 15:08:53Z

You can achieve this by calling the drawCallback() function when initializing DataTable and, inside it, check in each row if the column for office contains "Tokyo"; if so, remove the checkbox from the 1st column:

$(document).ready(function() {
  var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [{
      'targets': 0,
      'checkboxes': {
        'selectRow': true
      }
    }],
    'select': {
      'style': 'multi',
      'selector': 'td:first-child'
    },
    'order': [
      [1, 'asc']
    ],
    "drawCallback": function() {
      $("#example tr").each(function() {
        if ($(this).find("td:eq(3)").text() != "Tokyo") {
          $($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
        }

      });
    }
  });
});

Working Fiddle.

gaetanoM · Accepted Answer · 2020-05-26 16:04:56Z

2

During the columns rendering you can block the checkbox rendering.

Morever, on columns created Cell you can disable the checkbox.

Your columnDefs becomes (in order to remove checkboxes for London):

'columnDefs': [
    {
        'targets': 0,
        'checkboxes': {
            'selectRow': true
        },
        'render': function(data, type, row, meta){
            data = '<input type="checkbox" class="dt-checkboxes">'
            if(row[3] === 'London'){
                data = '';
            }
            return data;
        },
        'createdCell':  function (td, cellData, rowData, row, col){
            if(rowData[3] === 'London'){
                this.api().cell(td).checkboxes.disable();
            }
        }
    }
],

var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [
        {
            'targets': 0,
            'checkboxes': {
                'selectRow': true,
                'selectAllCallback': function(nodes, selected, indeterminate) {
                    if (indeterminate == false) {
                        $(nodes).closest('tr').toggleClass('selected', selected );
                    }
                },
                'selectCallback': function(nodes, selected) {
                    if (selected == false) {
                        $(nodes).closest('table').find('thead tr').removeClass('selected');
                    }
                }
            },
            'render': function(data, type, row, meta){
                data = '<input type="checkbox" class="dt-checkboxes">'
                if(row[3] === 'London'){
                    data = '';
                }
                return data;
            },
            'createdCell':  function (td, cellData, rowData, row, col) {
                if(rowData[3] === 'London'){
                    this.api().cell(td).checkboxes.disable();
                } else {
                    td.classList.add('dt-checkboxes-cell-visible');
                }
            }
        }
    ],
    'select': {
        'style': 'multi',
        'selector': 'td:first-child'
    },
    'order': [[1, 'asc']]
});

table.dataTable thead th.dt-checkboxes-select-all input[type="checkbox"],
table.dataTable tbody td.dt-checkboxes-cell-visible input[type="checkbox"] {
    visibility: hidden;
}
table.dataTable td.dt-checkboxes-cell-visible,
table.dataTable th.dt-checkboxes-select-all {
    position: relative;
}
table.dataTable td.dt-checkboxes-cell-visible:before,
table.dataTable td.dt-checkboxes-cell-visible:after,
table.dataTable th.dt-checkboxes-select-all:before,
table.dataTable th.dt-checkboxes-select-all:after {
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
}
table.dataTable td.dt-checkboxes-cell-visible:before,
table.dataTable th.dt-checkboxes-select-all:before {
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;
}
table.dataTable tr.selected td.dt-checkboxes-cell-visible:after,
table.dataTable tr.selected th.dt-checkboxes-select-all:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css">
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>

<h3><a href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes</a>: <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">Select extension</a></h3>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary Value</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">See full article on Gyrocode.com</a>

edited May 26, 2020 at 16:04

answered May 22, 2020 at 16:06

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

6 Comments

vmb Over a year ago

@gaetanoM..really sorry..its my mistake...now it is working..i wil mark it as answer after testing..Thank you so much friend..People like you making this place a heaven

vmb Over a year ago

..one more doubt..is any way i can implement checkbox style similar that we seeing in the below fiddle using ur implementation ..jsfiddle.net/annoyingmouse/yxLrLr8o..

gaetanoM Over a year ago

@vmb Snippet updated. Now the checkbox style has the desired aspect.

vmb Over a year ago

@gaetanoM..Thank you so much for you effort.I have implemented your new code and need a help to fix some issue.(1).I want to programatically disabling all checkbox.I am using $('#example tbody tr').removeClass('selected'); and it works for all elements except "SelectAll" checkbox.How can i programatically uncheck all the checkbox inside table 'example" including "SelectAll" checkbox.I tried $('#example').find('thead tr').removeClass('selected'); and it is not working.

vmb Over a year ago

@ gaetanoM ...i think above mentioned issue is specific to my implementation. I have done a workaround for fixing those issue...Thank you so much for you support for achieving this functionality

|

Charanjeet Singh · Accepted Answer · 2020-05-22 16:55:31Z

i have executed this code and it is working fine as you expected, in your code you just had to put the condition on the basis of the particular row of "office" parameter like mentioned below that will help you to achieve at the time of binding the data.

Here is the fiddle link : [https://jsfiddle.net/nzL39dye/3/][1]

Or

 $(document).ready(function() {
       var table = $('#example').DataTable({
          ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
          columnDefs : [
            { 
             targets : [0],
             render : function (data, type, row) {

              if (row[3] == "Tokyo") 
              {
                return '<input type="checkbox"  selectRow="true" class="dt-checkboxes">'
              }
                else {
                return '';

                }
              }
            }
       ],
          select: {
             style: 'multi',
             selector: 'td:first-child'
          },     
          order: [[1, 'asc']]
       });
    });

   }

This solution is simple and easy to understand.

Collectives™ on Stack Overflow

How to show Checkbox against each Row based on Column value - JQuery DataTable

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related