Datatable with Bootstrap Toggle

Roby Firnando

Hello everyone !, i have a problem when using bootstrap toggle on datatable . here i did initilize bootstrap toggle as like this discussion on this forum https://datatables.net/forums/discussion/46832/toggle-button-not-work-on-page-2-and-so-on-how-can-i-fix-it#Comment_123976 here on demo it's working fine, but when i tried to implemented on my own project it's made my element came like this :

<div class="toggle btn btn-default off btn-mini" data-toggle="toggle" style="width: 60%; height: 0px;">
    <div class="toggle btn btn-default off btn-mini" data-toggle="toggle" style="width: 60%; height: 0px;">
        <input type="checkbox" class="toggle" data-toggle="toggle" name="status" req_code="PR 00012J" id="SJ 00012B">
        <div class="toggle-group">
            <label class="btn btn-primary btn-mini toggle-on">Received</label>
            <label class="btn btn-default btn-mini active toggle-off">Unreceived</label>
            <span class="toggle-handle btn btn-default btn-mini"></span>
        </div>
    </div>

    <div class="toggle-group">
        <label class="btn btn-primary btn-mini toggle-on">Received</label>
        <label class="btn btn-default btn-mini active toggle-off">Unreceived</label>
        <span class="toggle-handle btn btn-default btn-mini"></span>
    </div>
</div>

it's like created twice element ...

and here is my datatable script :

var table = $('.dataTable').DataTable({
            "rowId": 'do_code',
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "sDom":"ltipr",
            "ordering": true,
            columnDefs: [{
            orderable: false,
            targets: "no-sort"
            }],
            "info": true,
            "autoWidth": true,
            "ajax": BASE_URL+'spareparts/partDeliveryOrder/ajax_all',
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
               var index = iDisplayIndex +1;
               $('td:eq(0)',nRow).html(index);
               
                $('.toggle',nRow).prop( 'checked', aData.do_isreceived == 1 ).bootstrapToggle({ 
                    width   : '60%',
                    size    : "mini",
                    on      : 'Received',
                    off     : 'Unreceived',
                });

               return nRow;
            },

            "columns":[
                {'data' : null},
                {'data' : "do_code"},
                {'data' : "request_code"},
                {'data' : "request_approve_code"},
                {'data' : "do_at"},
                {'data' : "fullname"},
                {'data' : "fullname2"},
                {'data' : "request_status"},
                {
                    'render' : function(data, type, row) {
                        btnAct = "";
                        btnDet = "";

                        btnDet = '<a class="btn btn-primary" href="'+BASE_URL+'spareparts/partDeliveryOrder/detail/'+row.encrypt_code+'"><i class="fa fa-eye"></i></a>';
                        
                        if (row.request_to != myId) 
                        {
                            btnAct = '<input type="checkbox" class="toggle" data-toggle="toggle" name="status" req_code="'+row.request_code+'" id="'+row.do_code+'" '+(row.do_isreceived == 1 ? "checked" : "")+'>';
                        }

                        return btnDet+"\n"+btnAct;
                    }    
                },
            ]
        });

any solutions of this problem ?
Thanks !

colin

Hi @Roby Firnando ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin