Toggle button not work on page 2 and so on. How can I fix it.

Toggle button not work on page 2 and so on. How can I fix it.

Noman_JavedNoman_Javed Posts: 3Questions: 1Answers: 0


See the image of first page. The toggle button work on 1st page.

Toggle button not properly working on page 2.

1.PNG 49.1K
2.PNG 30.1K

Answers

  • kthorngrenkthorngren Posts: 1,820Questions: 18Answers: 382
    edited January 12

    My guess is that the rowCallback function is not setup properly. Hard to say with seeing your code.

    Possibly the second FAQ here will help:
    https://datatables.net/faqs/index#Most-common-FAQs

    Kevin

  • Noman_JavedNoman_Javed Posts: 3Questions: 1Answers: 0
    edited January 13

    Here is my toggle button code. Have a look.

    Html code.

    <input class="toggle-event" value="<?php echo $row['id']; ?>" type="checkbox" checked data-toggle="toggle" data-style="ios">
    

    Javascript code.

    <script>
    $(".toggle-event").change(function(){
        if($(this).prop("checked") == true){
            //run code
            // alert('checked');
            var record_id = $(this).attr("value");
            // alert(id);
            $.ajax({     
            url: '<?php echo SURL.'Home/is_verified'; ?>',
            type: 'post',
            data:{value:1, id:record_id},
    
            }).done(function(msg){
              response = (msg == '0') ? true : false; 
              return response;
            }).fail(function(data){
            console.log("fail method is called");
            });
        }else{
           //run code
           // alert('un checked');
           var id = $(this).attr("value");
             // alert(id);
           $.ajax({     
            url: '<?php echo SURL.'Home/is_verified'; ?>',
            type: 'post',
            data:{value:1, id:record_id},        
    
            }).done(function(msg){
              response = (msg == '0') ? true : false; 
              return response;
            }).fail(function(data){
            console.log("fail method is called");
            });
        }
    });
    </script>
    

    How can I use this. I am getting data from database and showing that in the datatable.
    @kthorngren

    Edited for syntax highlighting using Markdown.

  • kthorngrenkthorngren Posts: 1,820Questions: 18Answers: 382
    edited January 12

    Are you using bootstrap toggle or some other toggle library?

    Looks like this is all outside of Datatables, is that correct?

    Are you using Editor or something else to update the DB when the checkbox is changed?

    If your events don't work on the second page then the second FAQ I pointed to above will describe the problem You may want to read more on jQuery delegated events.

    Can you post a link to your page or a test case so we can take a look?

    Here is an example of using checkboxes with Datatables:
    https://editor.datatables.net/examples/api/checkbox.html

    It includes updating the DB with Editor but you don't have to use that part.

    You may also want to look at this checkboxes plugin for Datatables:
    https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

    Kevin

  • Noman_JavedNoman_Javed Posts: 3Questions: 1Answers: 0

    I am using bootstrap datatables. and the ajax request is only to update the records.
    My question is why the toggle button is not showing properly on the second page. That's it. @kthorngren

  • kthorngrenkthorngren Posts: 1,820Questions: 18Answers: 382

    I understand the question. I'm trying to gather more information to help. Please put together a test case showing the problem so we can help debug the issue. Details of how to build a test case are here:
    https://datatables.net/manual/tech-notes/10

    The test case doesn't need the ajax request. It just needs to build a table with the checkboxes and the toggle-event but without the ajax.

    Kevin

  • kthorngrenkthorngren Posts: 1,820Questions: 18Answers: 382

    I use Bootstrap Toggle for my toggles. I put together a quick example of how I use it. I use the Bootstrap Toggle API and rowCallback to draw the toggles. Here is my example:

    http://live.datatables.net/noyivopo/1/edit

    Kevin

Sign In or Register to comment.