【发布时间】：2019-09-02 14:20:43
【问题描述】：
我有一个通过接收包含所有数据的数组从 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 之间存在冲突...
如果您能提供帮助，谢谢。
【问题讨论】：