javascript - checkbox in paginated datatable -
i have datatable , buttons delete , update. , these button disabled. have checkbox in first column of every row. whenever click checkbox, edit , delete button enabled. working on first page of datatable when click row other pages of datatable, doesn't enabling buttons. problem it? have code:
html table:
<table class="table table-bordered table-hover table-striped" id="account_data" width="100%" style="margin-top: 0px"> <thead class="header"> <tr class="well"><th colspan="3" style="text-align:center">list of users</th></tr> <tr class="well"> <th style="width: 5px"><input type="checkbox" class="check"/></th> <th style="font-size: 14px;padding-left: 20px;"> id#</th> <th style="font-size: 14px;padding-left: 20px;"> name</th> </tr> </thead> <tbody> <?php if($users != null){?> <?php foreach($users $row){ ?> <tr> <td align="center"><input type="checkbox" class="accounts" name="accounts[]" value="<?php echo $row->user_id;?>"/></td> <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_id;?></td> <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_name;?></td> </tr> <?php }?> <?php }?> </tbody> </table>
jquery:
<script> $(document).ready(function(){ var count=0; var chkid=new array(); var checkedvalue =''; $('.check').click(function() { $(" .check").each(function () { if($(this).is(":checked")) { $(" .accounts").prop('checked',true); // $('#edit_acc').prop('disabled',false); var n = $( " .accounts:checked" ).length; if(n==1){ $('#edit_acc').prop('disabled',false); } if(n>1){ $('#edit_acc').prop('disabled',true); } $('#delete_acc').prop('disabled',false); return } $(" .accounts").prop('checked',false); $('#edit_acc').prop('disabled',true); $('#delete_acc').prop('disabled',true); }); }); }); </script>
the problem checkboxes on page #2 , forth not part of dom when $(document).ready()
fired. jquery datatables inject , remove rows in order show different pages.
so must use delegated event handler instead of click()
. that, dynamically injected rows (i.e checkboxes) included :
$('#account_data').on('click', '.check', function() { ... });
instead of $('.check').click(function() {
Comments
Post a Comment