回答
您可以使用DataTables API来过滤表格。所以你所需要的只是你自己的输入字段和一个触发DataTables的过滤函数的keyup事件。使用CSS或jQuery,你可以隐藏/删除现有的搜索输入字段。或者,也许DataTables有一个设置来删除/不包含它。
签出关于此的Datatables API文档。
例子:
HTML
<input type="text" id="myInputTextField">
JS
oTable = $('#myTable').DataTable(); //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
oTable.search($(this).val()).draw() ;
})
您可以使用此sDom
选项。
与搜索输入默认在自己的div:
sDom: '<"search-box"r>lftip'
如果你使用jQuery UI(bjQueryUI
设置为true
):
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
以上将把搜索/将input
元素过滤到它自己的div
中,该类别名称为search-box
,该类别位于实际表格之外。
即使它使用其特殊的速记语法,它实际上也可以使用任何HTML。
当使用fnDrawCallback
函数绘制表格时,您可以移动div。
$("#myTable").dataTable({
"fnDrawCallback": function (oSettings) {
$(".dataTables_filter").each(function() {
$(this).appendTo($(this).parent().siblings(".panel-body"));
});
}
});
或者如果您使用更新版本的数据表,您将拥有:''drawCallback“:函数(设置)$(”。dataTables_filter“)。each(function(){(0){ $这个).appendTo($(this).parent()。siblings(“。panel-body”)); }); },' – 2015-10-20 20:52:08
这一个帮助我的数据表1.10.4版本,因为它的新的API
var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search($(this).val()).draw();
})
请注意“var oTable = $('#myTable')。DataTable();” (https://www.datatables.net/faqs/#api) – Lionel 2015-03-30 07:30:08
按@lvkz评论:
如果你正在使用的数据表与大写d .DataTable()
(此将返回一个Datatable API对象)使用这个:
oTable.search($(this).val()).draw() ;
这是@n etbrain回答。
如果你正在使用的数据表与小写字母d .dataTable()
(这将返回一个jQuery对象)使用此:
oTable.fnFilter($(this).val());
'oTable.fnFilter($(this).val());'也为我工作, – shabeer90 2015-03-20 16:04:11
这两种方法都是有效的,这取决于你打电话的方式数据表: 'oTable.search($(this).val())。draw();'你在调用时使用:'.DataTable()' 和这个: 'oTable.fnFilter($这个).val());'当你使用'.dataTable()' 区别在于首都D.希望它有帮助! – Lvkz 2015-08-05 20:45:22
给出“oTable.fnFilter不是函数”的数据表版本错误1.10.5 – 2016-03-24 12:20:08
$('#example').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../admin/ajax/loadtransajax.php",
"fnServerParams": function (aoData) {
// Initialize your variables here
// I have assign the textbox value for "text_min_val"
var min_val = $("#min").val(); //push to the aoData
aoData.push({name: "text_min_val", value:min_val});
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('id', 'tr_' + aData[0]);
$(nRow).attr('name', 'tr_' + aData[0]);
$(nRow).attr('min', 'tr_' + aData[0]);
$(nRow).attr('max', 'tr_' + aData[0]);
}
});
在loadtransajax.php
您可能会收到GET值:
if ($_GET['text_min_val']){
$sWhere = "WHERE (";
$sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
$sWhere .= ')';
}
如果您使用的是JQuery数据表,那么您只需添加"bFilter":true
即可。这将显示默认的搜索框外的表和它的作品dynamically..as每预计
$("#archivedAssignments").dataTable({
"sPaginationType": "full_numbers",
"bFilter":true,
"sPageFirst": false,
"sPageLast": false,
"oLanguage": {
"oPaginate": {
"sPrevious": "<< previous",
"sNext" : "Next >>",
"sFirst": "<<",
"sLast": ">>"
}
},
"bJQueryUI": false,
"bLengthChange": false,
"bInfo":false,
"bSortable":true
});
问题是要改变动态创建的位置。把它放在桌子外面 – 2016-01-25 09:25:02
这对您来说应该是工作:(数据表1.10.7)
oTable = $('#myTable').dataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.api().search($(this).val()).draw();
})
或
oTable = $('#myTable').DataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.search($(this).val()).draw();
})
更新版本的语法不同:
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function() {
table.search(this.value).draw();
});
请注意,此示例使用首次初始化数据表时分配的变量table
。如果你没有可用这个变量做,只需使用:
var table = $('#example').dataTable().api();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function() {
table.search(this.value).draw();
});
因为:数据表1.10
我有同样的问题。
我尝试了所有替代方法发布,但没有工作,我用了一种不正确的方式,但它的工作完美。
实例搜索输入
<input id="serachInput" type="text">
jQuery代码
$('#listingData').dataTable({
responsive: true,
"bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input
$("#serachInput").on("input", function (e) {
e.preventDefault();
$('#listingData').DataTable().search($(this).val()).draw();
});
我想一件事添加到您使用服务器端处理的情况下,相关的@netbrain's answer(见serverSide选项)。
数据表默认执行的查询限制(请参阅searchDelay选项)不适用于.search()
API调用。您可以通过以下方式使用$.fn.dataTable.util.throttle()取回:
var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
function(val) {
table.search(val).draw();
},
400 // Search delay in ms
);
$('#mySearchBox').keyup(function() {
search(this.value);
});
- 1. Serverside Datatables搜索框样式
- 2. jQuery Datatables搜索文本框
- 3. 数据表搜索框
- 4. jQuery dataTables - 停止通配符搜索数据表中的选择框
- 5. Jquery数据表:筛选器/搜索基于表外的选择框
- 6. datatables列搜索框不显示
- 7. datatables按钮和搜索框位置
- 8. datatables搜索选项
- 9. 从外部输入MVC jQuery数据表搜索
- 10. 多列搜索数据表
- 11. 数据表通过选择输入搜索+删除实际搜索框
- 12. 数据表搜索框不工作
- 13. Datatables搜索点击的div
- 14. 更新数据表搜索
- 15. 将搜索框添加到ASP.Net动态数据列表页面
- 16. 数据加载后搜索数据表
- 17. 搜索数据表
- 18. 数据库搜索框
- 19. jquery datatables textarea搜索限制
- 20. jQuery Datatables只搜索一列
- 21. 排除从数据表搜索功能的数据库ID
- 22. 更改数据表搜索功能
- 23. MySQL的搜索与数据表
- 24. 在数据表中搜索Ajax
- 25. Laravel数据表搜索belongsToMany名称
- 26. DataTables搜索除1之外的所有列
- 27. 网站上所有页面的标题中的数据表搜索框
- 28. 导致自定义搜索框滞后jquery数据表的大数据集
- 29. 搜索jQuery数据表
- 30. 搜索aspx页面的数据,找出
感谢您的解决方案! – 2011-05-13 10:54:58
你应该肯定使用.keyup而不是.keypress,否则你会遇到延迟结果 – 2013-09-11 15:38:10
我把'$(“。dataTables_filter:input”)。focus().val(value).keypress(); '在我的输入中'键入'大约一个小时,然后才发现这一点。永远不要使用API ..优雅的解决方案! – MattSizzle 2014-05-03 23:00:45