How to Integrate Bootstrap Toggle in jquery datatable

waweru99 karanja

i have been able to integrate bootstrap toggle in my jquery data table perfectly.in this case it works this way,on toggling it updates the a 'status' column in the category table from 0 to 1.0 means the category is inactive and 1 means the category is active.all this works well but am having a small issue.lets say for example i have activated the user in the toggle button to active,the active button will should show as active.in mycase the button isn't showing as per the value in the status column.how can i fix this

this is my js script that shows the data in the datatable

   var rentalhousescatstable = $('#rentalcatstable').DataTable({
      processing:true,
      serverside:true,
      responsive:true,

      ajax:"{{ route('get_rentalcats') }}",
      columns: [
          { data: 'id' },
          { data: 'rentalcat_title' },
          { data: 'status',name:'status',orderable:false,searchable:false },
          { data: 'action',name:'action',orderable:false,searchable:false },
      ],

      "fnDrawCallback": function( row ) {
        $('.rentalcatstatus')
        .prop( 'checked', row.status !== 1 )
        .bootstrapToggle();
      }
    });

this is my code in the controller

public function get_rentalcats(Request $request)
{
    $rentalcats=Rental_category::select('id','rentalcat_title','status');
    Session::put('page','rental_tags');

    if($request->ajax()){
        $rentalcats = DataTables::of ($rentalcats)

        ->addColumn ('status',function($row){
            return 
            '<input class="rentalcatstatus" type="checkbox" checked data-toggle="toggle" data-id="'.$row->id.'" data-on="Active" data-off="Not Active" data-onstyle="success" data-offstyle="danger">';
        })

        ->addColumn ('action',function($row){
            return 
                 '<a href="#" title="Edit the cat" class="btn btn-success editrentalcat" data-id="'.$row->id.'"><i class="fas fa-edit"></i></a>
                 <a href="#" id="deleterentalcat" title="Delete the cat" class="btn btn-danger" data-id="'.$row->id.'"><i class="fa fa-trash"></i></a>';
        })
        ->rawColumns(['status','action'])
        ->make(true);

        return $rentalcats;
    }

    return view('Admin.Rental_houses.rentals',compact('rentalcats'));
}

kthorngren

See if this example from this thread helps. See my last comment in that thread.

If you still need help please provide a link to a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

waweru99 karanja

@kthorngren how can I pass the data-id?.id for that specifc row.I have tried this but I get this syntax error Uncaught SyntaxError: Unexpected token '>'

kthorngren

Uncaught SyntaxError: Unexpected token '>'

That is a syntax error in the code. Its impossible to say what the problem is without seeing it. Please provide a running test case showing the issues so we can help debug.

Kevin

waweru99 karanja

here is test case..have a look
live.datatables.net/pesacoxe/176/

kthorngren

You have a few errors. I fixed the syntax error, commented out the ajax call as it doesn't work and you have an extra tr tag at the end of the table in HTML.
http://live.datatables.net/netisalo/1/edit

Kevin

waweru99 karanja

@kthorngren it works very..am able to do the toggle between active and inactive and send the request to the database..but still i havent solved the inital bug..let me explain,for example here we toggle to Inactive and change the status to 0 in the database.that category should be inactive and on page reload it will show a status of inactive..in my case here after changing from active to inactive it perfectly changes to inactive but after reloading the page it shows as active instead of Inactive..how can i fix that.i have removed the .prop( 'checked', row.status == 1 ) but still it doesnt work

kthorngren

Have you verified the DB is being updated correctly and the data from the DB is what you expect on page load?

Kevin

waweru99 karanja

yes its updating very well..on page load the user should see the status they have just changed to..here when the toggle is on (checked) thats 1 and when its off thats 0

kthorngren

My example uses rowCallback but yours has drawCallback. Change to rowCallback so each row is updated with the data.

Kevin

waweru99 karanja

@kthorngren thanks a lot.how can I close this discussion