Script:

$(document).ready(function() {
    $(function(){
        $("#result").dataTable({ 
            "scrollX" : true, 
                "ordering" : true,
                "order": [[ 1, "asc" ]],
                "info" : true, 
                });
        });  
    $("#all").click(function () { 
        if ($("#all").is(':checked')) {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", true);
            }); 
        } else {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", false);
            });
        }
    }); 
});     

HTML:

<table class="tg" id="result" style="width: 100%">
    <thead>
        <tr>
            <th class="tg" style="text-align: center"><input type="checkbox" id="all" 
                onclick="toggle(this);" /></th>
        </tr> 
    </thead>
    <tbody>
        <tr th:each="map : ${listID}">
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check"
                th:id="${map['ID']}" th:value="${map['ID']}" /></td>
        </tr>       
    </tbody>
</table>

Checking on one check box selects all but only limited to current page. It is not working for rest of the pages in pagination

Can anyone help on this issue. Thanks.

Script:

$(document).ready(function() {
    $(function(){
        $("#result").dataTable({ 
            "scrollX" : true, 
                "ordering" : true,
                "order": [[ 1, "asc" ]],
                "info" : true, 
                });
        });  
    $("#all").click(function () { 
        if ($("#all").is(':checked')) {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", true);
            }); 
        } else {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", false);
            });
        }
    }); 
});     

HTML:

<table class="tg" id="result" style="width: 100%">
    <thead>
        <tr>
            <th class="tg" style="text-align: center"><input type="checkbox" id="all" 
                onclick="toggle(this);" /></th>
        </tr> 
    </thead>
    <tbody>
        <tr th:each="map : ${listID}">
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check"
                th:id="${map['ID']}" th:value="${map['ID']}" /></td>
        </tr>       
    </tbody>
</table>

Checking on one check box selects all but only limited to current page. It is not working for rest of the pages in pagination

Can anyone help on this issue. Thanks.

• javascript
• jquery
• html
• checkbox
• datatable

• You mean it works for first page but does not work for other pages? and you want it to work for every page or all records in pagination ? – Rohit Arora Commented Jul 8, 2015 at 4:30
• It works for first page. I want to get it work for all page (all record in the table ) – Java_User Commented Jul 8, 2015 at 4:35
• every page and all records are different? – Java_User Commented Jul 8, 2015 at 4:35
• why both $(document).ready(function() { and $(function(){ inside? Seems rather unnessecary to me. – davidkonrad Commented Jul 8, 2015 at 15:42

3 Answers 3

Quite likely, you have duplicate IDs; if you have more than one element with the same ID, for example id="all", that gives rise to invalid HTML and you cannot predict how different browsers may handle that. Most will usually pick the first, and ignore the rest of the elements.

Please change:

 <input type="checkbox" id="all" onclick="toggle(this);" />

To:

<input type="checkbox" class="all" ....

So that your code would be:

$(".all").on('change', function () {
    $(this).closest('table').find('.checkboxclass').prop('checked', this.checked ); 
}); 

UPDATE

Thanks for clarifying; I'll leave the above so that your ments where you've clarified this may remain relevant

Here is how you may resolve that issue:

    $(function(){
        var table = $("#result").dataTable({ 
            "scrollX" : true, 
                "ordering" : true,
                "order": [[ 1, "asc" ]],
                "info" : true, 
                });
        });  
        $("#all").on('click', function () { 
            var cells = table.api().cells().nodes();
            $( cells ).find('.checkboxclass').prop('checked', this.checked);
        });
    });
    //source: https://www.datatables/forums/discussion/22728/datatables-1-10-select-all-checkbox-and-hidden-rows-pages

Please note that $(document).ready(function() { .... }); and $(function() { .... }); are different ways of writing the same thing -- no need to nest them.

This worked for me.

if ($("#all").is(':checked')) { 
  $(".checkboxclass", table.fnGetNodes()).each(function () { 
  $(this).prop("checked", true);
  });     
else {
  $(".checkboxclass", table.fnGetNodes()).each(function () {
  $(this).prop("checked", false); 
  })
  }

you have declared on click toggle function but it is not used. please find the code snippet it helpful to sort out ur issue.

<table class="tg" id="result" style="width: 100%">
    <thead>
        <tr>
            <th class="tg" style="text-align: center">
                <input type="checkbox" id="all" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
        </tr>
    </tbody>
</table>

 $("#all").click(function () {
    if (this.checked) {
        $('.checkboxclass').each(function () {
            this.checked = true;
        })
    }
    else {
        $('.checkboxclass').each(function () {
            this.checked = false;
        })
    }
})