1

I am using JQuery datatables. I want to add select all column with checkboxes so that when I click on 'select all' check box all the checkboxes on that page should get selected.

I am using the following code:

<table id="myTable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th> Name</th>
            <th> Type</th>
            <th> Details</th>
            <th>Select <input type="checkbox" name="select_all" value="1" id="select-all"></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($test as $data) { ?>
        <tr>
            <td><?php echo $data->name; ?></td>
            <td><?php echo $data->type; ?></td>
            <td><a href="/details">view details</a></td>
            <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td>


        </tr>
        <?php } ?>
    </tbody>
</table>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});

$('#select-all').on('click', function(e) {
if($(this).is(':checked',true))  
{
    $(".sub_chk").prop('checked', true);  
}  
else  
{  
    $(".sub_chk").prop('checked',false);  
}  
});
</script>

The above code works for the first page of the datatable but if I select the second page and if I select 'Select all' checkbox, it takes me to the first page instead of selecting the checkboxes in the second page.

Is there a solution to this?

AquausDev
  • 37
  • 1
  • 6
san
  • 237
  • 7
  • 19

2 Answers2

2

Working example

The problem comes from the sort, you should disable the sort in the th that contain the select all checkbox.

Hope this helps.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • 1
    Yeah you're right, my mistake. I didn't realise the content was being dumped in the page on load, I thought it was coming from AJAX as it really should be when doing paging. – Rory McCrossan Dec 30 '16 at 12:09
  • @Zakaria Acharki It does not work .. let me explain it again There is a jquery datatable with all data and a column with checkboxes and its header has another checkbox (to select all checkboxes on that page). If I am on the first page I click select all All the rows get checked. That is correct, But when I go to next page of the datatable the header select all checkbox remains selected. If I unselect it, it takes me to the first page of datatable instead of selecting the checkboxes of the second page.. – san Dec 30 '16 at 12:15
  • I think the problem comes from the sort, try to disable the sort on the `th` that has the `select-all` checkbox, http://jsfiddle.net/UvjnT/1475/ – Zakaria Acharki Dec 30 '16 at 12:25
  • Thanks removing sort worked but the checkbox remains in the previous state how can I set it back , Meaning if I am on the first page of the jquery datatable, I select the select all checkbox from the th , then I go to the next page , On the next page the select all checkbox from the th header still remains as checked How do I maintain the state on it on each page, for example if I do select all on the second page and go to third page , The third page should not show as checked But if i come back to 2nd page it should show as checked – san Dec 31 '16 at 04:35
0

i hope this link helps you with your problems. thanks

http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

Lalji Dhameliya
  • 1,729
  • 1
  • 17
  • 26
  • 1
    You have sufficient reputation to imply a degree of familiarity with the site and its expectations that answers be self-contained and not be entirely reliant on a link to an external site. Please include the relevant parts of that site, summarised, in your answer showing how, and why, it's relevant to the specific question you're attempting to answer. – David Thomas Jan 01 '17 at 15:05