laravel - 数据表选择 - 不选择行或复选框，cdn 加载...一切正常，复选框显示但不可选择

Question

尝试使用和不使用复选框（复选框将显示但不可选择），也使用编辑器。项目是 laravel 的本地开发者。代码片段是我得到的最好的。我大约有 5 个小时在网上搜索。除了选择以及编辑和删除按钮外，其他一切都在工作，因为我无法选择。没有控制台错误。内联编辑效果很好。

我尝试了 dataTables.select.js 和 dataTables.select.min.js。尝试了许多不同版本的选择。

JS 和 CSS

  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>

<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>


<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap4.min.js')}}"></script>




<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap4.min.css">

桌子

<table class="table" id="example">
          <thead>
            <tr>
              <th></th>   <!--Checkbox Column --!>
              <th></th>   <!-- Avatar Column --!>
              <th>Name</th>
              <th>Priority</th>
              <th>Title</th>
              <th>Body</th>
            </tr>
          </thead>
        </table>

JS

$(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                }
            });

          var editor = new $.fn.dataTable.Editor({
                ajax: "manage",
                table: "#example",
                idSrc:  'id',
                fields: [
                    {label:"Title", name: "title", type:"textarea"},
                    {label:"Priority", name: "priority_id", type: "select",
                     options: [
                       @foreach ($priorities as $priority)
                       { label: "{{$priority['name'] }}", value: "{{$priority['id']}}" },
                       @endforeach
                     ]
                  },
                    {label:"user_id", name: "user_id", type: "select", def: "Unassigned",
                     options: [
                       @foreach ($users as $user)
                       { label: "{{$user['first_name'] }} {{$user['last_name']}}", value: "{{$user['id']}}" },
                       @endforeach
                     ]
                  },
                    {label:"Body", name: "body", type:"textarea"}
                ]
            });



            $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
                editor.inline(this, {
                  buttons: {label: '&gt', fn:function(){ this.submit()}},
                  onBlur: 'submit',
                  submit: 'allIfChanged'
                });
            });


            $(function() {
            var table =  $('#example').DataTable({
                ajax: '/manage/data',
                dom: 'Bfrtip',
                order: [3, 'asc'],
                processing: true,
                serverSide: true,
                deferRender: true,
                select:[
                  {style: 'multi'},
                  {selector: 'td:first-child'}
                ],
                columns: [
                  {
                    data : null,
                    defaultContent : '',
                    className : 'select-checkbox',
                    title : '',
                    orderable : false,
                    searchable : false
                  },
                  {data: 'user_avatar', name:"user_avatar", render: function(data,type,row){      // column
                    if (row.user == null) {
                      var avatar = "<img style='width:75px' src='/storage/users/default.png'>";
                    } else {
                      var avatar = "<img style='width:75px' src='/storage/"+ row.user.avatar +"'>";
                        }
                        return avatar;
                  }},

                  { data: null, name: 'user.name', editField: "user_id", defaultContent: '', render: function(data,type,row){ //column
                    if(row.user === null){
                      var name = 'Unassigned';
                    } else {
                      var name = row.user.first_name +" "+ row.user.last_name;
                    }
                    return name;
                  } },

                  {
                    data: 'priority.name',
                    name: 'priority.name',
                    editField:"priority_id"
                  },
                  {
                    data: 'title',
                    name: 'title'
                  },
                  {
                    data: 'body',
                    name: 'body'
                  }
                ],
                buttons: [
                  {extend: 'create', editor: editor},
                  {extend: 'edit', editor: editor},
                  {extend: 'remove', editor: editor},
                  {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                      'copy',
                      'excel',
                      'csv',
                      'pdf',
                      'print'
                    ]
                  }
                ]

              });
            });

        })

我也尝试过使用

$('#example tbody').on( 'click', 'tr', function () {
              if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
              } else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
              }
            } );

标签： laraveldatatablesjquery-datatables-editor