使用数据表进行高级搜索

Question

我想知道有没有办法改进数据表中的搜索？我在数据表中有一个数字列。是否可以只返回正在搜索的号码？

例如：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

    });

});

Answer 1

您可以使用数据表插件来覆盖某些功能。在您的情况下，您可以将自定义函数添加到$.fn.dataTable.ext.search.push$.fn.dataTable.ext.search.push(&nbsp; &nbsp; function( settings, data, dataIndex ) {&nbsp; &nbsp; &nbsp;const searchTerm = $("[type=search]").val();&nbsp; &nbsp; &nbsp;if(searchTerm){&nbsp; &nbsp; &nbsp; &nbsp;return data[3] === searchTerm&nbsp; &nbsp; &nbsp;}else{&nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; });在上面的代码中，我在每行的第四列上使用全文搜索。将根据函数的返回值（真或假）包含或排除行。参考：https : //datatables.net/examples/plug-ins/试试下面的代码片段。在年龄列上启用全文搜索。$.fn.dataTable.ext.search.push(&nbsp; &nbsp; function( settings, data, dataIndex ) {&nbsp; &nbsp; &nbsp;const searchTerm = $("[type=search]").val();&nbsp; &nbsp; &nbsp;if(searchTerm){&nbsp; &nbsp; &nbsp; &nbsp;return data[3] === searchTerm&nbsp; &nbsp; &nbsp;}else{&nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; });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%">&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Position</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Office</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Start date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Salary</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Tiger Nixon</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>System Architect</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Edinburgh</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>61</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>2011/04/25</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>$320,800</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Garrett Winters</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Accountant</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Tokyo</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>63</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>2011/07/25</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>$170,750</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Ashton Cox</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Junior Technical Author</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>San Francisco</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>66</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>2009/01/12</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>$86,000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Cedric Kelly</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Senior Javascript Developer</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Edinburgh</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>22</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>2012/03/29</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>$433,060</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp;</table>