CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4checkbox
Dev
Dev

Reputation: 73

check box not working with datatable.js pagination's second page

I am using datatable.js for pagination:

When I check a checkbox inside table row, I have to show Lock/Delete buttons which are out side the table. For this I have Done Below jQuery Code:

 $(document).ready(function () {      

    $('#tblID :input[type="checkbox"]').on('click',function () {
        var checkedBoxes = $('#tblID:input[type="checkbox"]:checked').length;

        if (checkedBoxes > 0) {
            alert(checkedBoxes);
            $("#lnkLock").show();
            $("#lnkDelete").show();

        }
        else {
            alert(checkedBoxes);
            $("#lnkLock").hide();
            $("#lnkDelete").hide();
        }
    });
 });

It is working Only on The First Page of table.When I navigate to second page of datatable /Table it stops working(Buttons (lock/delete)) are not shown.

On second, third...pages checkbox click event is also not fired.

How can I do it on other pages?

Upvotes: 4

Views: 2657

Answers (2)

Pawan
Pawan

Reputation: 1744

Assign a class say chkClassName to your checkbox and change your code a little bit as below:

 $('#tblID').on("change", ".chkClassName", function (event) {
        var checkedBoxes = $('#tblID :input[type="checkbox"]:checked').length;
        if (checkedBoxes > 0) {               
            $("#lnkLock").show();
            $("#lnkDelete").show();
        }
        else {             
            $("#lnkLock").hide();
            $("#lnkDelete").hide();
        }
    });

Upvotes: 3

Venkatesh Mani
Venkatesh Mani

Reputation: 11

Try the click handler inside of datatable page event

$('#example').on( 'page.dt', function () { //your click handler is here });

reference link enter link description here

Upvotes: 0

Related Questions