1

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.

1 Answers1

0

Try using $('.table-responsive').on('change', 'input[name=my-checkboxtt]', function() { as your change listener, your current listener might not work on inputs that don't exist at the time it is declared. Declaring it this way should let you listen for changes on dynamically added inputs.

$('.table-responsive').on('change', 'input[name=my-checkboxtt]', 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 ) {

    });
});

the selector before .on controls where jquery watches for changes. If you use $(document).on... It will check for input[name=my-checkboxtt] changes anywhere on your page.

Narrowing it down by using $('.table-responsive').on( helps jquery know it only has to check for changes to inputs inside table-responsive elements. This helps get rid of any performance issues or bad side effects.

IrkenInvader
  • 4,030
  • 1
  • 12
  • 23