Checkbox first column

Jim3540

Hello, I would like to get a checkbox at the first column. And also a checkbox that select all. I found this example: https://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

But I have difficulties how to implement into my code. I need som help from you!

My code look like:

// Data received from php
var data = JSON.parse(xhr.responseText);

// Deleate table
if ($.fn.DataTable.isDataTable('#example')) {
$('#example').DataTable().destroy();
$('#example').removeClass('dtr-inline collapsed');
}

var columns = [];
columnNames = Object.keys(data[0]);
for (var i in columnNames) {
columns.push({data: columnNames[i],
title: columnNames[i] + '\xa0'});
}

table = $('#example').DataTable( {
pagingType: "simple_numbers",
orderCellsTop: true,
ordering: true,
dom: 'trp',
scrollX: true,
lengthMenu: [ 10, 25, 50, 75, 100, 500, 50000],
data: data,
columns: columns
} );

kthorngren

To start with you will need to add the first column code manually. Instead of starting with an empty columns array, ie var columns = [];, do something like this:

var columns = [
{
         'targets': 0,
         'searchable': false,
         'orderable': false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
         }
      }
];

KEvin

Jim3540

Thanks kthorngren! I mange to get the checkboxes working. I got more more issue. The code below works to check which checkboxes is checked. But if I reorder I get the wrong value.

table.$('input[type="checkbox"]').each(function() {

// If checkbox is checked
if(this.checked){

var tr = $(this).closest("tr");
Row = tr.index();
Col = $(this).index() + 1;

var data = table.cell( Row, Col).data();
console.log(data);
};
});

Jim3540

I found this example from you kthorngren:
http://live.datatables.net/mutavegi/1/edit

Excaty what I want expect that if Ifilter I get checkboxes that does not show (if they are checked before they are fitered away).

Is that possible to modify with this exampe?

kthorngren

You can use the selector-modifier to limit the rows to those on the page {page: 'current'} or those visible after searching {search: 'applied}`.

Kevin

Jim3540

Thanks again kthorngren !

Here how to make it for somebody else:

var data = table
.rows( function ( idx, data, node ) {
    return $(node).find('input[type="checkbox"][name="chkbx"]').prop('checked');
}, { search: 'applied' } )
.data()
.toArray();