i am using datatable and using checkbox in each row , but jquery doesnot work on second page ,as script loads , i can only change and update only first ten rows when goto 2nd page script doesn't work, even alert didn't invokes. i am sharing my code have a look and let me know where i am missing something to make it work for all rows at any page .
here is table i am using for displaying data ,
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Today Appointments</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example" id="dataTables-example" >
<thead>
<tr>
<th>App User</th>
<th>Appointment Id</th>
<th>Client Contact</th>
<th>Gender</th>
<th>Age</th>
<th>Address</th>
<th>Type</th>
<th>To Doctor</th>
<th>Dr City</th>
<th>Dr Phone</th>
<th>Dr Speciality</th>
<th>Description</th>
<th>Transaction</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<?php foreach($appointments as $d){ ?>
<tr class="odd gradeX">
<td><?php echo $d["email"]; ?></td>
<td><?php echo $d["id"]; ?></td>
<td><?php echo $d["phone"]; echo ($d["confirm"]=="0")?"":" <i class='fa fa-check-circle text-success'></i>"; ?></td>
<td><?php echo $d["gender"]; ?></td>
<td><?php echo $d["age"]; ?></td>
<td><?php echo $d["address"]; ?></td>
<td><?php echo $d["type"]; ?></td>
<td><?php echo $d["dr_name"]; ?></td>
<th><?php echo $d["dr_city"] ?></th>
<th><?php echo $d["dr_phone"] ?></th>
<th><?php echo $d["category"] ?></th>
<th><?php echo $d["description"] ?></th>
<td><label class="switch">
<input type="checkbox" id="<?php echo $d["id"]; ?>" name="my-checkboxtt" <?php echo ($d["transaction"]=='Unpaid')? "" : "checked"; ?> />
<span class="slider round"></span>
</label>
</td>
<td><?php echo $d["app_date"]; ?></td>
<td><?php echo $d["time"]; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
JQuery
<script>
$(document).ready(function(){
var confirm = 'Unpaid';
$("input[name=my-checkboxtt]").change(function() {
alert('toggled');
if(this.checked) {
confirm = 'Paid';
}
id = (this).id;
$.ajax({
method: "POST",
url: "index.php?component=doctor&action=transaction",
data: { appid: id , value: confirm }
})
.done(function( msg ) {
});
});
});
</script>
i have searched allover internet i got some solution related like this but i am unable to do this in my scenario, i need help how can i make it work in my case , my problem is same as the link i have posted , but i am unable to perform here ,
footer.php
<script src="<?php echo ADMIN_THEME ?>js/sb-admin.js"></script>
<!-- Page-Level Demo Scripts - Dashboard - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable({
});
$('.dataTables-example').dataTable({
});
});
</script>
the footer file is included like this ,
<?php echo common::load_view("common","footer"); ?>
What i only want is to whenever i check the checkbox the script should run , but currently is working only on page 1 of datatable, not on any record after that , i want to run the script on every page and with evert row, i am at the beginner level and working really hard in this . your help is requires , Thanks.