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: 8Questions: 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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited January 2018

    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: 8Questions: 1Answers: 0
    edited January 2018

    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: 20,141Questions: 26Answers: 4,736
    edited January 2018

    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: 8Questions: 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: 20,141Questions: 26Answers: 4,736

    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: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • Noman_JavedNoman_Javed Posts: 8Questions: 1Answers: 0
    edited January 2018

    How can I show on and off when the database values came are 1 and 0. @kthorngren
    If the database value came is 1 then toggle button should be on. and when the database value came is 0 then the toggle button should be off.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    I updated the example to show this:
    http://live.datatables.net/noyivopo/3/edit

    You set this in the rowCallback:

        rowCallback: function ( row, data ) {
            $('input.editor-active', row).prop( 'checked', data.active == 1 ).bootstrapToggle({size: 'mini'});
        }
    

    Added .prop( 'checked', data.active == 1 ). data.active is dependent on you specific data structure.

    Kevin

  • Noman_JavedNoman_Javed Posts: 8Questions: 1Answers: 0
    edited January 2018

    How I can add a unique id to every record using datatable. As I did it

    foreach( loop )
    <td><input value="<?php echo $row['id']; ?>"> </td>
    endforeach

    As I need to update the record in a database. @kthorngren

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Where do you get this unique ID? Is it in the initial data from the DB?

    You can get the data for the row with the changed checkbox using Datatables API's. I updated the example to show how:
    http://live.datatables.net/noyivopo/4/edit

        $('#example').on( 'change', 'input.editor-active', function () {
            //console.log($(this).prop( 'checked' ) ? 1 : 0 );
            var data = table.row($(this).closest('tr')).data();
            console.log(data);
        } );
    

    You just need to get the element from the data that has your ID.

    Kevin

  • Noman_JavedNoman_Javed Posts: 8Questions: 1Answers: 0

    I wrote the line

    <td id="<?php echo $row['id']; ?>"><?php echo $row['is_verified']; ?>> value 0 or 1 </td>

    and I want to get the id value.
    I am trying to use

    var data = table.row($(this).id();

    but getting error. How can I get the id attribute value. @kthorngren

  • Noman_JavedNoman_Javed Posts: 8Questions: 1Answers: 0
    edited January 2018


    Want to get this id value. @kthorngren

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    If you want to get the id attribute then you would use jQuery, something like this:
    $(this).closest('td').attr('id')

    The row().id() api is used to get the row ID from Datatables cache not from HTML. Are you returning something from your database that can be used as an ID?

    If you are returning your data as an array of objects and you have a row ID then you can use row().id(). You will need to use rowId to define your id field. For example:
    http://live.datatables.net/noyivopo/6/edit

    The example sets a variable data to an array of objects which includes the row id and checkbox value (1 or 0). It uses rowId and columns.data to define the id field and all the columns.

    If you are using an arrays instead of objects then the example needs to be a bit different.

    Kevin

  • Noman_JavedNoman_Javed Posts: 8Questions: 1Answers: 0

    thanks that help me a lot. @kthorngren

This discussion has been closed.