check uncheck All checkboxes not working for all pages when using datatable

Question

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.

Answer 1

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 comments 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.net/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.

Answer 2

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); 
  })
  }

Answer 3

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;
        })
    }
})