Checkbox first column

Checkbox first column

Jim3540Jim3540 Posts: 15Questions: 5Answers: 0

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
} );

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • Jim3540Jim3540 Posts: 15Questions: 5Answers: 0
    edited October 2021

    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);
    };
    });

  • Jim3540Jim3540 Posts: 15Questions: 5Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited October 2021 Answer ✓

    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

  • Jim3540Jim3540 Posts: 15Questions: 5Answers: 0

    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();
    
Sign In or Register to comment.