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

Noman_Javed

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

Toggle button not properly working on page 2.

kthorngren

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_Javed

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.

kthorngren

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_Javed

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

kthorngren

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

kthorngren

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_Javed

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.

kthorngren

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_Javed

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

kthorngren

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_Javed

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_Javed

Want to get this id value. @kthorngren

kthorngren

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_Javed

thanks that help me a lot. @kthorngren