Jquery datatable with checkbox in header and in row:select all checkbox not working

Question

I am using Jquery Datatable. I want to have a first column with header and rows with a checkbox and should toggle the selection of header checkbox with remaining row's checkboxes. I have below implementation.

Datatable attribute

  "aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null]

Datatable row

<td><input type="checkbox' class="case"></input></td>

Javascript function

  function toggleChecks(obj)
    {
        $('.case').prop('checked', obj.checked);
    }

This is worked fine when i am on single page. But when I do the paging then checkboxes remain unchecked for other page. How to achieve this for behaving consistently for all checkboxes. Please assist.

why dont you toggle checkboxes inside $('#selectall').change(function(){});. I have done like this in couple of tables. — chank
– chank, Commented May 21, 2014 at 21:38

chank · Accepted Answer · 2014-05-21 21:43:44Z

3

I have done something like,

$('#selectall').change(function() {
                        var isSelected = $(this).is(':checked');
                        if(isSelected){
                            $('.case').prop('checked', true);   
                        }else{
                            $('.case').prop('checked', false);
                        }
                    });

on document ready.

answered May 21, 2014 at 21:43

chank

3,6361 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Ensley Over a year ago

The function could be reduced to one line like this: $('.case').prop('checked', $(this).is(':checked'));

Igor L. · Accepted Answer · 2014-04-04 15:38:04Z

0

guys,

had a similar problem that needed quick solution.

Made a workaround for this problem, might help somebody:

As I dynamically feed the table some data:

oTable1.fnAddData
([
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>",
    title, 
    modified, 
    version
] );

Notice the span for the checkbox. This obviously stays hidden and can be accessed easily.

answered Apr 4, 2014 at 15:38

Igor L.

3,5157 gold badges45 silver badges69 bronze badges

Comments

Josh Crozier · Accepted Answer · 2016-01-14 00:09:59Z

0

You should use the function fnDrawCallback to update there the table when the page changes.

You can check in this function the value of the header checkbox and update the new rows checkboxes.

You can also add a boolean value to your objects in the model, and change that value when you check or uncheck. If you access to the model you can modify the values of all your elements, not only the rendered ones. Then, when you load your cells you represent that true/false with the checkbox. This is the most consistent approach, but probably will involve much more work to get a good syncro between the model and the view.

edited Jan 14, 2016 at 0:09

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered Jul 26, 2013 at 11:36

Wood

1,7661 gold badge12 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery datatable with checkbox in header and in row:select all checkbox not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related