How to Integrate Bootstrap Toggle in jquery datatable
How to Integrate Bootstrap Toggle in jquery datatable
waweru99 karanja
Posts: 17Questions: 5Answers: 1
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'));
}
This question has accepted answers - jump to:
Answers
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
@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 '>'
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
here is test case..have a look
live.datatables.net/pesacoxe/176/
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
trtag at the end of the table in HTML.http://live.datatables.net/netisalo/1/edit
Kevin
@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
Have you verified the DB is being updated correctly and the data from the DB is what you expect on page load?
Kevin
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
My example uses
rowCallbackbut yours hasdrawCallback. Change torowCallbackso each row is updated with the data.Kevin
@kthorngren thanks a lot.how can I close this discussion