Single check box selection with jquery datatable

Question

In jquery datatable, single check box should be selected.

This link is working fine.

But above link is using jquery.dataTables 1.10.16 version. And I am using jquery.dataTables 1.9.4.

Can the same functionality as listed in example given above be possible with jquery.dataTables 1.9.4 instead of jquery.dataTables 1.10.16?

Answer 1

In the same page which you give the link, there are many explanation about to using "single check" oparetion.

At the end of the listed attachment, you can see the referanced .js file is

https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js

In your page, you should add this file referance after dataTable.js.

I think, the version of jquery is not important. The important file is "dataTables.select.js"!

Secondly, you must update your dataTable maker codes like the sample below;

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child' // this line is the most importan!
        },
        order: [[ 1, 'asc' ]]
    } );
} );

UPDATES :

Why dont you try to write your own selector function?

for example;

$(document).ready(function() {
    $('#example').DataTable( {
            /// put your options here...
        } );

    $('#example').find("tr").click(function(){ CheckTheRow(this); });
} );

function CheckTheRow(tr){
    if($(tr).find("td:first").hasClass("selected")) return;

    // get the pagination row count
    var activePaginationSelected = $("#example_length").find("select").val();

    // show all rows
    $("#example_length").find("select").val(-1).trigger("change");

    // remove the previous selection mark
    $("#example").find("tr").each(function(i,a){
         $(a).find("td:first").removeClass("selected");
         $(a).find("td:first").html("");
     });

     // mark the picked row
     $(tr).find("td:first").addClass("selected");
     $(tr).find("td:first").html("<i class='fa fa-check'></i>");

     // re turn the pagination to first stuation
     $("#example_length").find("select")
                         .val(activePaginationSelected).trigger("change");

}

Answer 2

Unfortunately, legacy data table does not support or have that select extension.

Workaround:

1. Create checkbox element inside 'mRender' callback.
2. Bind action to the checkbox. (This can be done inside the fnRowCallback or outside as in my example in below fiddle

https://jsfiddle.net/Rohith_KP/dwcatt9n/1/

 $(document).ready(function() {
  var userData = [
    ["1", "Email", "Full Name", "Member"],
    ["2", "Email", "Full Name", "Member"]
  ];

  var table = $('#example').DataTable({
    'data': userData,
    'columnDefs': [{
      'targets': 0,
      'className': 'dt-body-center',
      'mRender': function(data, type, full, meta) {
        return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
      }
    }],
    'order': [1, 'asc']
  });

  $('#example tr').click(function() {
    if ($(this).hasClass('row_selected'))
      $(this).removeClass('row_selected');
    else
      $(this).addClass('row_selected');
  });
});

Also, I suggest you to upgrade your datatable version. Then you can use that select extension.