Поиск данных с помощью одной кнопки поиска и кнопки очистки - PullRequest
Новая
       0

Поиск данных с помощью одной кнопки поиска и кнопки очистки

0 голосов
/ 25 октября 2019

Я реализую обновляемую ajax-сетку, куда я загружаю данные, используя API Bigcommerce. Я реализовал окно поиска по столбцам. Но проблема в том, что он ищет в реальном времени. Я не хочу этогоЧто я хочу сделать, так это хочу кнопку поиска и кнопку очистки в последнем столбце.

Теперь предположим, что я ввел ключевое слово в поле поиска названия продукта, а также ввел одно ключевое слово в SKU. Теперь, когда я нажимаю кнопку поиска, он должен искать, используя оба ключевых слова. Как я могу сделать то же самое?

Вот мой код

HTML 

<table id="example" class="display" style="width:100%"> 
        <thead> 
            <tr> 
                <th>Image</th> 
                <th>Product SKU</th> 
                <th>Product Name</th> 
                <th>Price</th> 
                <th>Status</th> 
                <th>Actions</th> 
            </tr>
        </thead> 
        <tfoot> 
            <tr> 
                <th>Image</th> 
                <th>Product SKU</th> 
                <th>Product Name</th> 
                <th>Price</th> 
                <th>Status</th> 
                <th>Actions</th> 
            </tr> 
        </tfoot> 
    </table>

JS 

$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function (i) {
  var title = $(this).text();

  $(this).html( '<input class="no_sort" type="text" />' );                  

  $( 'input', this ).on( 'keyup change', function () {
    if ( table.column(i).search() !== this.value ) {
        table
             .column(i)
             .search( this.value )
             .draw();
     }
  } );
} );

Используя JS, я добавляюФильтр чуть ниже заголовков таблицы

Что я хочу: https://prnt.sc/pnzygy Как это выглядит в данный момент: https://prnt.sc/pnzz98

1 Ответ

0 голосов
/ 25 октября 2019

Var table = $ ('# example'). DataTable ();

table.column (2) .search ("sku"). Draw ();table.column (3) .search ("название продукта"). draw ();

...