Datatable с переключателем Bootstrap - PullRequest
Новая
       2

Datatable с переключателем Bootstrap

0 голосов
/ 10 апреля 2019

У меня проблема при использовании переключателя начальной загрузки на datatable. Здесь я инициализировал переключатель начальной загрузки, как показано в этом обсуждении на форуме datatable Обсуждение переключателя начальной загрузки Bootstrap в демо-версии все работает нормально, но когда я попытался реализовать его в своем собственном проекте, он создал такой элемент: 

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

это как созданный дважды элемент ...

и вот мой сценарий с данными: 

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;
                    }   
                },
            ]
        });

какие-либо решения этой проблемы?

Спасибо!

...