Show/hide checkbox in select column conditionaly

Show/hide checkbox in select column conditionaly

NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have a checkbox select column and I am trying to show/hide the checkbox (allow row selection) based on the value in column 6.
I tired both drawCallback and rowCallback but all checkboxes still show up. When I debug I can see that it falls into the checkbox removal section, but it never finds the checkbox to remove.

What am I missing?

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'
  },
  rowCallback: function (row, data, index) {
      if (data.STATUS != 3) {
          $('td:eq(0)', row).find('.select-checkbox').remove();
      }
  },
  drawCallback: function() {
      $("#example tr").each(function() {
          if ($(this).find("td:eq(6)").text() != "3") {
              $($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
          }
      });
    }
});

Answers

  • kthorngrenkthorngren Posts: 20,791Questions: 26Answers: 4,860

    You are using the Gyrocode checkboxes plugin. Inspecting the checkbox you will find it uses the class dt-checkboxes not select-checkbox as is used by the Select checkbox example.

    <td class=" dt-checkboxes-cell">
      <input type="checkbox" class="dt-checkboxes" autocomplete="off">
    </td>
    

    You need to change your rowCallback to find the class dt-checkboxes, like this:
    http://live.datatables.net/ziquguxe/1/edit

    Note the slight change to the if statement to use the Office column. Also for the rowCallback code the-option ajaxoption is pulling the data from one of the Gyrocde examples using arrays. Thedata.STATUS` won't work as this is trying to access an object not an array element.

    Your drawCallback code seems to work with the same Office column change:
    http://live.datatables.net/pihucove/1/edit

    I would suspect that the drawCallback should remove the checkbox from all columns as there is no data in the Salary column that equals "3".

    If you still have problems then update the test case or provide your own that replicates the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    I thought I had posted the solution to my issue but it seems it has disappeared!

    The Gyrocode portion was a copy paste problem. Rather than copy and modify my own data table code, I just blindly copied a code I had found. I am not using that checkbox. When I inspect the cell with checkbox, its class is 'select-checkbox':

    columnDefs: [
        {
            targets: 0,
            orderable: false,
            defaultContent: '',
            className: 'select-checkbox'
        },
    

    I solved my issue in rowCallback by replacing:

    $('td:eq(0)', row).find('.select-checkbox').remove();
    

    with

    $('td:eq(0)', row).removeClass('select-checkbox');
    

    and removing drawCallback altogether; although I could have made a similar change there too, replacing

    find("input[type='checkbox']").remove() 
    

    with

    removeClass('select-checkbox')
    

    Also, data.STATUS referred to a column in my data table and not the data from Gyrocode.

    Thank you for your prompt response, as always.

Sign In or Register to comment.