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.

Answer 1

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 .

Answer 2

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.

Answer 3

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>