Я использую таблицы данных с большим набором данных (на стороне сервера) как для глобального поиска, так и для поиска по отдельным столбцам.Оба моих поиска запускаются по ключу (по умолчанию), но я хочу запустить их, используя одну кнопку поиска, чтобы уменьшить попадание на сервер.Однако я не могу понять, как это сделать.
Мне удалось добавить кнопку поиска в initComplete, но я не знаю, как обнаружить как существующий глобальный поиск, так и столбцы, чтобы он запускал один поиск по всем критериям.Я думаю, что он мне нужен, чтобы перебрать столбцы, используя каждый, и получить их значения, затем AND с глобальным поиском, а затем нарисовать таблицу, но я просто не могу понять правильную логику.
Вот мой рабочий код, который имеет метод keyup по умолчанию (используются поля лезвия Laravel, но это просто обычные поля ввода / выбора текста. Маршрут Laravel также вводится в этот шаблон лезвия)
<table class="table table-bordered hover stripe" id="data-table">
<thead>
<tr id="filterrow">
<th></th>
<th></th>
<th></th>
<th class="dtheadx">Date created<br/>{!! Form::text('3','', ['size'=>'8', 'class' => 'srchfield plain lightplaceholder','placeholder'=>'dd/mm/yyyy']) !!}</th>
<th class="dthead">Ref yr<br/>{!! Form::select('4',$years,'', ['size'=>'1', 'class' => 'srchfield plain selInput']) !!}</th>
<th class="dthead">Ref no<br/>{!! Form::text('5','', ['size'=>'1', 'class' => 'srchfield text-uppercase']) !!}</th>
<th class="dthead">Current surname<br/>{!! Form::text('6','', ['size'=>'15', 'class' => 'srchfield text-uppercase']) !!}</th>
<th class="dthead">Current forename<br/>{!! Form::text('7','', ['size'=>'15', 'class' => 'srchfield text-uppercase']) !!}</th>
</tr>
</thead>
</table>
</div>
$(function () {
$.fn.dataTable.ext.errMode = 'throw';
table = $('#data-table').DataTable({
select: false,
processing: true,
serverSide: true,
stateSave: true,
stateDuration: 60 * 5,
order: [[2, 'desc'], [0, 'desc']],
lengthMenu: [50, 75, 100],
pageLength: 50,
language: {
processing: "<img src='{{asset('images/loading.gif')}}'/>"
},
ajax: {
url: '{!! $routeToData !!}'
},
initComplete: function () {
$(".dataTables_info").addClass("dtinfo");
$(".dataTables_length").addClass("dtselect");
$(".dataTables_filter").addClass("dtsearch");
$(".dataTables_paginate").addClass("dtpaginate");
},
columns: [
{data: 'id', name: 'contact.id', visible: false},
{data: 'ref', name: 'ref', visible: false},
{data: 'created_at', name: 'created_at', visible: false},
{data: 'created', name: 'created', targets: [2], orderData: [2, 0]},
{data: 'ref_year', name: 'ref_year', orderable: false, width: '1%'},
{data: 'ref_no', name: 'ref_no', orderable: false, width: '1%'},
{data: 'surname', name: 'surname', orderable: false, width: '30%'},
{data: 'forename1', name: 'forename1', orderable: false}
]
});
});
// Common DataTable filtering
var table = $('#dtable').DataTable();
// Filter inputs
$("th.dthead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
// Exact filter on drop-down
$("th.dtheadx input, select").on('keyup change', function () {
var srch = '';
if (this.value === '') {
srch = this.value;
} else {
srch = '^' + this.value;
}
table
.column($(this).parent().index() + ':visible')
.search(srch, true, false)
.draw();
});