[英]Advanced search with data-table
I was wondering is there way to improve search in data table?我想知道有没有办法改进数据表中的搜索? I have a numeric column in a datatable.
我在数据表中有一个数字列。 Is it possible to return back just the number being searched on?
是否可以只返回正在搜索的号码?
So for example: 100 210 310 1例如:100 210 310 1
and if I search for 1 I want to show only:1 but not the others that contain 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
});
});
You can make use of datatable plugins to override some of the features.您可以使用数据表插件来覆盖某些功能。 In your case, you can add your custom function to
$.fn.dataTable.ext.search.push
在您的情况下,您可以将自定义 function 添加到
$.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;
}
}
);
In the above code, I'm using a full text search on fourth column for each row.在上面的代码中,我对每一行的第四列使用了全文搜索。 Row will be included or excluded based on the return value of the function (true or false).
将根据 function 的返回值(true 或 false)包含或排除行。
Ref: https://datatables.net/examples/plug-ins/参考: https://datatables.net/examples/plug-ins/
Try the below snippet.试试下面的代码片段。 Full text search enabled on age column.
在年龄列上启用全文搜索。
$.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.