datatables mysql_jquery - Datatables - 数据表外的搜索框

jquery - Datatables - 数据表外的搜索框

我正在使用DataTables(datatables.net)，我希望我的搜索框在表格之外(例如在我的标题div中)。

这可能吗 ？

11个解决方案

191 votes

您可以使用DataTables api过滤表。 所以你需要的只是你自己的输入字段，其中一个keyup事件触发了DataTables的过滤功能。 使用css或jquery，您可以隐藏/删除现有的搜索输入字段。 或者DataTables可能有删除/不包含它的设置。

在此查看Datatables API文档。

例：

HTML

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() ;

})

netbrain answered 2019-07-28T13:51:03Z

31 votes

根据@lvkz评论：

如果你使用大写的数据表d .dataTable()(这将返回一个Datatable API对象)使用：

oTable.search($(this).val()).draw() ;

这是@netbrain的答案。

如果你使用小写的数据表d .dataTable()(这将返回一个jquery对象)使用这个：

oTable.fnFilter($(this).val());

zizoujab answered 2019-07-28T13:51:49Z

14 votes

您可以使用input选项。

在其自己的div中使用搜索输入默认：

sDom: 'lftip'

如果您使用jQuery UI(input设置为div)：

sDom: 't'

以上将把搜索/过滤input元素放入它自己的div，其中一个名为search-box的类在实际表之外。

即使它使用其特殊的简写语法，它实际上可以使用你抛出的任何HTML。

mekwall answered 2019-07-28T13:52:44Z

8 votes

这个帮助我获得DataTables版本1.10.4，因为它的新API

var oTable = $('#myTable').DataTable();

$('#myInputTextField').keyup(function(){

oTable.search( $(this).val() ).draw();

})

cinnamonbear answered 2019-07-28T13:53:11Z

6 votes

更新的版本具有不同的语法：

var table = $('#example').DataTable();

// #myInput is a element

$('#myInput').on('keyup change', function () {

table.search(this.value).draw();

});

请注意，此示例使用在首次初始化数据表时分配的变量table。 如果您没有此变量，只需使用：

var table = $('#example').dataTable().api();

// #myInput is a element

$('#myInput').on('keyup change', function () {

table.search(this.value).draw();

});

自：DataTables 1.10

- 来源：[https://datatables.net/reference/api/search()]

Jonny answered 2019-07-28T13:54:00Z

4 votes

这应该适合你：(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();

})

Sky Yip answered 2019-07-28T13:54:27Z

3 votes

我有同样的问题。

我尝试了所有替代方案，但没有工作，我使用了一种不正确的方法，但它工作得很好。

示例搜索输入

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();

});

Bruno Ribeiro answered 2019-07-28T13:55:08Z

3 votes

我想在使用服务器端处理的情况下为@netbrain的答案添加一个更多的东西(请参阅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);

});

citxx answered 2019-07-28T13:55:40Z

1 votes

使用fnDrawCallback函数绘制表格时，可以移动div。

$("#myTable").dataTable({

"fnDrawCallback": function (oSettings) {

$(".dataTables_filter").each(function () {

$(this).appendTo($(this).parent().siblings(".panel-body"));

});

}

});

ebrown answered 2019-07-28T13:56:06Z

1 votes

$('#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 .= ')';

}

Senanayaka answered 2019-07-28T13:56:33Z

0 votes

如果您正在使用JQuery dataTable，那么您只需添加"bFilter":true。这将在表外显示默认搜索框，并且其动态工作..按预期

$("#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

});

Nikhil Thombare answered 2019-07-28T13:57:01Z