数据表 – 数据表外的search框
我正在使用DataTables（ datatables.net ），我想我的search框在表外（例如在我的头div）。
这可能吗 ？
您可以使用DataTable api来过滤表。 所以你所需要的只是你自己的input字段，它有一个触发了DataTables的过滤函数的keyup事件。 使用CSS或jQuery，你可以隐藏/删除现有的searchinput字段。 或者，也许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() ; })
根据@lvkz评论：
如果您使用大写的数据表d .DataTable() （这将返回一个Datatable API对象）使用这个：
oTable.search($(this).val()).draw() ;
这是@netbrain的答案。
如果你使用小写d .dataTable() （这将返回一个jQuery对象）使用数据表：
oTable.fnFilter($(this).val());
你可以使用sDom选项。
默认searchinput在它自己的div：
sDom: '<"search-box"r>lftip'
如果您使用jQuery UI （ bjQueryUI设置为true ）：
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
上面的代码将search/过滤input元素放到它自己的div search-box ，并且在实际表格之外有一个名为search-box的类。
尽pipe它使用了特殊的简写语法，但它实际上可以使用任何HTML。
这个帮了我DataTables版本1.10.4，因为它的新API
var oTable = $('#myTable').DataTable(); $('#myInputTextField').keyup(function(){ oTable.search( $(this).val() ).draw(); })
这应该适合你：（DataTables 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第一次初始化时分配的variablestable 。 如果你没有这个variables，只需使用：
var table = $('#example').dataTable().api(); // #myInput is a <input type="text"> element $('#myInput').on('keyup change', function () { table.search(this.value).draw(); });
从：DataTables 1.10
– 来源： https ： //datatables.net/reference/api/search（）
如果您使用服务器端处理（请参阅serverSide选项），我想再向@ netbrain的答案中添加一个相关内容。
由数据表默认执行的查询限制（请参阅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); });
当使用fnDrawCallback函数绘制表格时，可以移动div。
$("#myTable").dataTable({ "fnDrawCallback": function (oSettings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); } });
$('#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您可能会收到以下值：
if ($_GET['text_min_val']){ $sWhere = "WHERE ("; $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' "; $sWhere .= ')'; }
我有同样的问题。
我尝试了所有的select，但没有工作，我用了一种不正确的方式，但是它的工作完美。
示例searchinput
<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(); });
如果你正在使用JQuery数据表，所以你只需要添加"bFilter":true 。 这将显示默认的search框外表和它的工作dynamic..按预期
$("#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 });
