How to Integrate Bootstrap Toggle in jquery datatable

How to Integrate Bootstrap Toggle in jquery datatable

waweru99 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0
edited August 2022 in Free community support

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

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

    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 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0

    @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 '>'

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

    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 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0

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

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

    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 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0

    @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

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

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

    Kevin

  • waweru99 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0
    edited August 2022

    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

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

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

    Kevin

  • waweru99 karanjawaweru99 karanja Posts: 13Questions: 4Answers: 0
    edited August 2022

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

Sign In or Register to comment.