Как мне сделать столбец и глобальный поиск на кнопке одновременно с использованием Datatables - PullRequest
0 голосов
/ 09 июня 2019

Я использую таблицы данных с большим набором данных (на стороне сервера) как для глобального поиска, так и для поиска по отдельным столбцам.Оба моих поиска запускаются по ключу (по умолчанию), но я хочу запустить их, используя одну кнопку поиска, чтобы уменьшить попадание на сервер.Однако я не могу понять, как это сделать.

Мне удалось добавить кнопку поиска в 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();

});



Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...