Geek Answers Handbook

JQuery datatable checkall

HTML

<div class="box">
<table id="Datatable">
    <thead>
       <tr>
         <th><input name="checkall" type="checkbox" class="checkall" value="ON" /></th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
         <th>field</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th class="checkers"><input type="checkbox" name="selected[]"/></th>
        <td>value</td>                                          
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
        <td>value</td>  
      </tr>
   </tbody>
</table>
</div>

I am trying to set the checkall checkbox to select all the checkboxes using this code:

$('.checkall').click(function () {
        var checkall =$(this).parents('.box:eq(0)').find(':checkbox').attr('checked', this.checked);
        $.uniform.update(checkall);
    });

Since the datatable shows the first lines of 10,20,30 ... etc and removes the others from the DOM to do pagination, this jQuery code selects only the rows on the current page. Anyway, can I select all the checkboxes?

+5
source share
5 answers

i found a solution

$('.checkall', oTable.fnGetNodes()).click(function () {
+5
source

My solution also works:

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.fnGetNodes()).prop('checked',chk);
        });

And if you want the check to only be filtered (if you use dom to filter in datatables), you can use this to check only the filtered

$('.checkall').click(function(e) {

          var chk = $(this).prop('checked');

          $('input', oTable.$('tr', {"filter": "applied"} )).prop('checked',chk);
        });
+7
source

, .

, , :

"aoColumnDefs": [ { "mRender": function (data, type, full) { 
    return '<input type="checkbox" id="id" class="class" value="' + data + '">'; },  "aTargets": [0] } ]

// Note: aTargets is the zero-indexed array determining placement of the checkbox column
// "aTargets": [0] gives you the first column (first from left)

RUN-CMD, TableTools , , / . , .

, _fnRowSelect() TableTools.js( - 1079 - 1119 ):

// This marks them as selected
    for ( i=0, len=data.length ; i<len ; i++ )
    {
        data[i]._DTTT_selected = true;

        if ( data[i].nTr )
        {
            $(data[i].nTr).addClass( that.classes.select.row );
            // Now if there a checkbox somewhere in the row - we check it
            $(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked');
        }
    }

, TableTools, all/select none. .

TableTools.js( 2393 ):

/* Combines select_all and select_none buttons
 * Default button text is a checkbox
 * to strip button style and use a checkbox alone put this on native page: 
 * $(".select-all-master").removeClass("btn");
 */
"select_master": $.extend( {}, TableTools.buttonBase, {
    "sButtonText": '<input type="checkbox" id="master_check" class="row_checks master_check" value="">',
    "sButtonClass": "select-all-master",
    "sAction": "div",
    "sTag": "div",
    "fnClick": function( nButton, oConfig ) {
        var that = this;
        var selected = false;
        $("table tr").each(function(i) {
            if ($(this).hasClass("active")) {
                selected = true;
            }
        });
        if (selected==false) {
            that.fnSelectAll();
            $("#master_check").prop('checked', 'checked');
        }
        if (selected==true) {
            that.fnSelectNone();
            $("#master_check").prop('checked', '');
            selected = false;
        }
    }
} ),

select all/none toggle, , TableTools. init:

"aButtons": [ { "sExtends": "select_master","sToolTip": "Tool tip to display on checkbox hover" } ]

init :

JavaScript:

$(document).ready(function() {
    $(".select-all-master").appendTo("thead#selectallbtn");
    $(".select-all-master").removeClass("btn");
});

HTML:

<thead class="selectallbtn"></thead>

all/none controller. bootstrap, , - () CSS .

, : http://screencast.com/t/c3ZDi0mmiGj

: , . touchpunch/touchstart.

+2

, , , , . , .

-2

More articles:


All Articles