CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxdatatable
Java_User
Java_User

Reputation: 475

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

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.

Upvotes: 3

Views: 9925

Answers (3)

PeterKA
PeterKA

Reputation: 24638

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.

Upvotes: 4

Java_User
Java_User

Reputation: 475

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

Upvotes: 3

J.M.Farook
J.M.Farook

Reputation: 183

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

Upvotes: 0

Related Questions