Get checked row IDs from datatable with multiple checkboxes

thili

Following is my HTML code.

<table id = "annotations_table" class="table responsive">
</table>

And this is javascript code.

const populate_annotations_table = function(indexes = "null") {
          //check box for visible
          // <th scope="col"> visible <input type="checkbox"  value="1" id="visible"> </th>'; 
          //check box for marked
          // <th scope="col"> visible <input type="checkbox"  value="1" id="marked"> </th>'; 

 
    // Initialize the DataTable
              table = $('#annotations_table').DataTable();
              'columnDefs': [{
               'targets': 1,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-center',
               'render': function (data, type, full, meta){
                   return '<input type="checkbox" class="a" id= "marked_1" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                }
               },{
               'targets': 2,
               'searchable':false,
               'orderable':false,
               'className': 'dt-body-center',
               'render': function (data, type, full, meta){
                   return '<input type="checkbox" class="b" id= "visible_1 name="id[]" value="' + $('<div/>').text(data).html() + '">';
                }
               }
               ]
            });
             // Handle click on "Select all" control
               $('#marked').on('click', function(){
                  // Check/uncheck all checkboxes in the table
                  var rows = table.rows({ 'search': 'applied' }).nodes();
                  $('input.a', rows).prop('checked', this.checked);
               });
                // Handle click on "Select all" control
               $('#visible').on('click', function(){
                  // Check/uncheck all checkboxes in the table
                  var rows = table.rows({ 'search': 'applied' }).nodes();
                  $('input.b', rows).prop('checked', this.checked);
               });

                    // Handle click on checkbox to set state of "Select all" control on marked
           $('#annotations_table tbody').on('change', #marked_1', function(){
              // If checkbox is not checked
              if(!this.checked){
                 var el = $('#marked_1').get(0);
                 // If "Select all" control is checked and has 'indeterminate' property
                 if(el && el.checked && ('indeterminate' in el)){
                    // Set visual state of "Select all" control
                    // as 'indeterminate'
                    el.indeterminate = true;
                 }
              }
           });

                    // Handle click on checkbox to set state of "Select all" control on visible
           $('#annotations_table tbody').on('change', #visible_1', function(){
              // If checkbox is not checked
              if(!this.checked){
                 var el = $('#visible_1').get(0);
                 // If "Select all" control is checked and has 'indeterminate' property
                 if(el && el.checked && ('indeterminate' in el)){
                    // Set visual state of "Select all" control
                    // as 'indeterminate'
                    el.indeterminate = true;
                 }
              }
           });

       // Here I need to get all the checked marked and visible row ids. I saw it can be taken using rowId and tried several ways to get. But not getting the correct output.

}

I want to create two array and keep all the checked values in it. Any guidance for this really appreciate. And if check all, every page checked values should come to the array.
Appreciate your support on this.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

See if this example helps:
https://live.datatables.net/hahoyebu/1/edit

Start with this event handler:

  $('#get-selected').on('click', function () {
    // Get rows with checked checkboxes
    var rows = table
    .rows( function ( idx, data, node ) {
        // Get all the checkboxes in the row
        var cells = $(node).find('input[type="checkbox"]');   
        // Keep the rows with checked checkboxes
        return checkedTargets(cells).length;
    } );
    
    // Get the row's `id` object
    var rowIds = rows.data().pluck('id').toArray();
    console.log(rowIds);
  });

It uses rows() with the row-selector as a function to fetch the rows with checked checkboxes. It then uses rows().data() to get the selected row's data then pluck() to get the id object of each row. toArray() turns this into a standard Javascript array.

Likely you will need to make some changes based on your solution. If you still need help please provide a test case with your above code and an example of your data so we can provide more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin