Question

我正在使用具有全局搜索和单个列搜索的大型数据集（服务器端）的数据表。我的两个搜索都在键盘启动时触发（默认），但是我想使用一个搜索按钮来触发这些搜索，以减少服务器上的点击。但是，我不知道如何做到这一点。

我设法在initComplete上添加了一个搜索按钮，但我不知道如何同时检测现有的全局搜索和列，因此它不会触发所有条件的单个搜索。我想我需要它遍历各列并获取它们的值，然后将它们与全局搜索进行“与”运算，然后绘制表格，但我只是无法正确理解逻辑。

这是我的工作代码，它具有默认的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();

});

如何使用数据表同时在按钮上进行列和全局搜索

0 个答案: