Toggle Switch on Datatables using Laravel

Question

I am trying to add a column for a toggle switch in my data table, but it's not working. It's just showing this text

When it should be like this

These are my codes

$(function(){
    $('#table').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{!! URL::asset('/amenity/table') !!}',
      columns : [
        { data: function (data) {return '<a href="amenity-details?id=' + data.id + '">' + data.name + '</a>';}, name: 'name' },
        { data: 'dayrate', name: 'dayrate' },
        { data: 'nightrate', name: 'nightrate' },
        { data: function(data){
            return '<div class="switch switch-square" data-on-label=\"<i class=" fa fa-check"></i>\" data-off-label=\"<i class="fa fa-times"></i>\"> <input type="checkbox" class="status '+data.status+'" data-id="'+data.id+'" /></div>';
        }, name: 'state', orderable: true, searchable: false},
        { data: 'action', name: 'action', orderable: false, searchable: false}
      ]

    });
  });

Gyrocode.com · Accepted Answer · 2017-08-21 12:31:25Z

1

CAUSE

Since your switch is added at later time after ready event, it doesn't get initialized.

SOLUTION

You need to initialize controls used in jQuery DataTable each time the table is redrawn. Use drawCallback option to define a function that will be called every time the table has been redrawn.

For example:

$('#table').DataTable({
   // ... skipped ...
   drawCallback: function(settings){
      var api = new $.fn.dataTable.Api( settings );

      // Initialize switch
      $('.switch', api.table().body()).bootstrapSwitch(); 
   }
});

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.

edited Aug 21, 2017 at 12:31

answered Mar 5, 2017 at 20:55

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jane doe Over a year ago

I tried this, and the table doesn't show anymore :(

Gyrocode.com Over a year ago

@user5156944, try to include only drawCallback part.

Collectives™ on Stack Overflow

Toggle Switch on Datatables using Laravel

1 Answer 1

CAUSE

SOLUTION

LINKS

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CAUSE

SOLUTION

LINKS

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related