2天以来,我一直在为一个看似非常简单的问题而绞尽脑汁,而且有很多可用的帮助,但我无法让它工作。我试图在网格的每一列上做一个服务器端搜索,当我调用dataTable.columns(0).search('search-term').draw()
的POST请求时,它生成的columns[0][search][value]
总是空的。
下面是我一遍又一遍地尝试不同事物的两种方法,但这两种方法都不适合我,显然我缺少了一些东西。
为了清晰起见,我还附上了一个快照,下面是我的数据表的完整配置,有人能指出我做错了什么吗?
方法# 1
initComplete: function () {
$('.scheduling-search')
.on('keyup change', function () {
var i = $(this).attr('data-column');
var v = $(this).val();
schedulingGrid.columns(i).search(v).draw();
}
);
}
方法# 2
schedulingGrid.columns().every( function () {
var column = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
column
.search( this.value )
.draw();
} );
});
下面是我的DataTable
的完整配置var schedulingGrid = $('#scheduling-manager-grid').DataTable({
processing: true,
searchDelay: 1000,
pageLength: {$pageSize},
paginate: true,
lengthChange: false,
filter: false,
info: true,
autoWidth: false,
serverSide: true,
order: [[3, '{$defaultSortOrder}']],
language: {
paginate: {
next: '',
previous: ''
}
},
ajax: {
type: 'post',
url: '{$url}',
},
columns: [
{
width: '40px',
data: 'briefingId',
name: 'id',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingTitle',
name: 't.title',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'dateSubmitted',
name: 't.created_at',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'preferredDate',
name: 't.preferred_date',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'requesterName',
name: 't.requestor_name',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingStatus',
name: 't.briefing_status_id',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingType',
name: 't.briefing_type_id',
searchable: true,
orderable: true
},
{
data: 'notes',
name: 'notes',
searchable: true,
orderable: false
}
],
initComplete: function () {
$('.scheduling-search')
.on('keyup change', function () {
var i = $(this).attr('data-column');
var v = $(this).val();
schedulingGrid.columns(i).search(v).draw();
}
);
}
});
HTML像
<table id="scheduling-manager-grid">
<thead>
<tr>
<th>Briefing ID</th>
<th>Briefing Title</th>
<th>Date Submitted</th>
<th>Preferred Briefing Date</th>
<th>Requestor Name</th>
<th>Briefing Status</th>
<th>Briefing Type</th>
<th>Notes</th>
</tr>
</thead>
<thead>
<tr>
<td><input style="width: 50px;" type="text" data-column="0" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="1" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="2" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="3" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="4" class="scheduling-search"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
</table>
SOLUTION
我配置了错误的数据表。来自datatable。net的Allan指出了这个问题并修复了它。我不得不从配置中删除filter: false
以使其工作。
查看完整的讨论在这里:https://datatables.net/forums/discussion/comment/98607#Comment_98607