Расширенный поиск с таблицей данных - PullRequest
Новая
       28

Расширенный поиск с таблицей данных

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

Мне было интересно, есть ли способ улучшить поиск в таблице данных? У меня есть числовой столбец в таблице данных. Можно ли вернуть только номер, по которому производится поиск?

Так, например: 100 210 310 1

, и если я ищу 1, я хочу показать только: 1, но не остальные, содержащие 1 

 jQuery(document).ready(function ($) {
    var db = $('#min-table').DataTable({
        "dom": '<"pull-left"f><"pull-right"l>tip',
        "bJQueryUI": true,
        "bSort": true,
        "bSearchable": true,
        "bPaginate": true,
        "lengthMenu": [[20, 35, 50, -1], [20, 35, 50, "All"]],
        "iDisplayLength": 20
    });

});

1 Ответ

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

Вы можете использовать датируемые плагины для переопределения некоторых функций. В вашем случае вы можете добавить свою пользовательскую функцию к $.fn.dataTable.ext.search.push

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
     const searchTerm = $("[type=search]").val();
     if(searchTerm){
       return data[3] === searchTerm
     }else{
       return true;
     }
    }
);

. В приведенном выше коде я использую полнотекстовый поиск по четвертому столбцу для каждой строки. Строка будет включена или исключена на основе возвращаемого значения функции (true или false).

Ref: https://datatables.net/examples/plug-ins/

Попробуйте приведенный ниже фрагмент кода. В столбце возраста включен полнотекстовый поиск. 

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
     const searchTerm = $("[type=search]").val();
     if(searchTerm){
       return data[3] === searchTerm
     }else{
       return true;
     }
    }
);

var table = $('#example').DataTable();
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
      </tbody>
 </table>
...