Question

我有一个通过接收所有数据的数组从laravel创建的表：

<table id="my_table" class="table table-striped table-hover table-bordered mytable" width="100%">
          <thead>
            <tr>
              <th>Action</th>
              <th>Cluster</th>
              <th>lead domain</th>
              <th>Customer (a)</th>
              <th>Customer (b)</th>
              <th>Project name</th>
              <th>Assigned User</th>
              <th>ID</th>
              <th>Opportunity owner</th>
              <th>Created date</th>
              <th>Close date</th>
              <th>stage</th>
              <th>Win ratio (%)</th>
              <th>Order Intake (€)</th>
              <th>Consulting (€)</th>
            </tr>
          </thead>
          <tbody>
          @foreach($ids as $key => $project)
            @if(!$project['in_db'])
              <tr class="item">
                <td><button type="button" class="btn btn-info btn-xs add"><span class="glyphicon glyphicon-plus"></span></button></td>
                <td class="owners_sales_cluster">{!! $project['owners_sales_cluster'] !!}</td>
                <td class="opportunity_domain">{!! $project['opportunity_domain'] !!}</td>
                <td class="account_name">{!! $project['account_name'] !!}</td>
                <td class="customer_name">
                  <select class="customers select2" style="width: 100%;" data-placeholder="Select a customer name">
                    @foreach($customers_list as $key => $value)
                    <option value="{{ $key }}" @if ($value == $project['account_name']) selected @endif>
                      {{ $value }}
                    </option>
                    @endforeach
                  </select>
                </td>
                <td class="opportunity_name"><div contenteditable>{!! $project['opportunity_name'] !!}</div></td>
                <td class="users_name" style="width: 200px;">
                  <select class="users select2" style="width: 100%;" data-placeholder="Select a user name">
                    @foreach($users_select as $key => $value)
                    <option value="{{ $key }}">
                      {{ $value }}
                    </option>
                    @endforeach
                  </select>
                </td>
                <td class="public_opportunity_id">{!! $project['public_opportunity_id'] !!}</td>
                <td class="opportunity_owner">{!! $project['opportunity_owner'] !!}</td>
                <td class="created_date">{!! $project['created_date'] !!}</td>
                <td class="close_date">{!! $project['close_date'] !!}</td>
                <td class="stage">{!! $project['stage'] !!}</td>
                <td class="probability">{!! $project['probability'] !!}</td>
                <td class="amount_tcv">{!! $project['amount_tcv'] !!}</td>
                <td class="consulting_tcv">{!! $project['consulting_tcv'] !!}</td>
              </tr>
            @endif
          @endforeach
          </tbody>
        </table>

您可以看到我正在为每一行创建2个带有选择框的单元格。这些列是customer_name和users_name。

它的工作原理如此好，但是我希望能够从Datatables的灵活性中获利，为此，这是我的js代码：

my_table = $('#my_table').DataTable({
          scrollX: true,
          @if(isset($table_height))
          scrollY: '{!! $table_height !!}vh',
          scrollCollapse: true,
          @endif
          stateSave: true,
          order: [[0, 'asc']],
          columns: [
              { name: 'action', data: 'null' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'owners_sales_cluster', data: 'owners_sales_cluster' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'opportunity_domain', data: 'opportunity_domain' , searchable: true , visible: false},
              { name: 'account_name', data: 'account_name' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'customer_name', data: 'customer_name' , searchable: false , visible: true, className: "dt-nowrap"},
              { name: 'opportunity_name', data: 'opportunity_name' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'users_name', data: 'users_name' , searchable: false , visible: true, className: "dt-nowrap"},
              { name: 'public_opportunity_id', data: 'public_opportunity_id' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'opportunity_owner', data: 'opportunity_owner' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'created_date', data: 'created_date' , searchable: true , visible: false, className: "dt-nowrap"},
              { name: 'close_date', data: 'close_date' , searchable: true , visible: false, className: "dt-nowrap"},
              { name: 'stage', data: 'stage' , searchable: true , visible: false, className: "dt-nowrap"},
              { name: 'probability', data: 'probability' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'amount_tcv', data: 'amount_tcv' , searchable: true , visible: true, className: "dt-nowrap"},
              { name: 'consulting_tcv', data: 'consulting_tcv' , searchable: true , visible: true, className: "dt-nowrap"},
            ],
          lengthMenu: [
              [ 10, 25, 50, -1 ],
              [ '10 rows', '25 rows', '50 rows', 'Show all' ]
          ],
          dom: 'Bfrtip',
          buttons: [
            {
              extend: "colvis",
              className: "btn-sm",
              columns: [1,2,3,5,7,8,9,10,11,12,13,14]
            },
            {
              extend: "pageLength",
              className: "btn-sm"
            },
            {
              extend: "csv",
              className: "btn-sm",
              exportOptions: {
                  columns: ':visible'
              }
            },
            {
              extend: "excel",
              className: "btn-sm",
              exportOptions: {
                  columns: ':visible'
              }
            },
            {
              extend: "print",
              className: "btn-sm",
              exportOptions: {
                  columns: ':visible'
              }
            },
          ]
        });

当我这样做时，我有一个数据表，但问题是所有选择框都不再起作用。不可选择...

我还将select2 js用于选择框，并按如下所示对其进行初始化：

$(".customers").select2({
                  allowClear: true
        });
        $(".users").select2({
          allowClear: true
        });

如果我从选择框中删除select2类，那么我可以再次选择，所以我猜Datatables和Select2之间存在冲突...

谢谢您的帮助。

Answer 1

好的，我找到了原因。实际上，在绘制数据表之后进行Select2初始化很重要。

为此，我使用：

drawCallback: function() {
            $('.select2').select2({
              allowClear: true
            });
          },

这需要放在数据表的定义中，例如在按钮之后（以我为例），然后一切正常...

在数据表的所有单元格中添加下拉列表

1 个答案: