Datatables - 在数据表格外添加搜索框

Question

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

这是否可能？

- Athanasios Emmanouilidis

Answer 1

你可以使用DataTables API来过滤表格。因此，您需要拥有自己的输入字段，并具有keyup事件，该事件会触发筛选函数到DataTables。使用CSS或jQuery，您可以隐藏/删除现有的搜索输入字段。或者也许DataTables有一个设置来删除/不包含它。

请查看Datatables API文档。

示例：

HTML

<input type="text" id="myInputTextField">

JavaScript

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

---

你应该一定使用 .keyup 而不是 .keypress，否则你会在结果上体验到延迟。 - Sævar

在我的输入框的 keyup 事件中，我尝试了大约一个小时来使用 $(".dataTables_filter :input").focus().val(value).keypress();，直到发现了这个。从未想过使用 API.. 真是一种优雅的解决方案！ - MattSizzle

JS需要更改，使用.search($(this).val()).draw()代替fnFilter。请参阅：https://datatables.net/manual/api#Chaining。我已经修改了此答案以进行修复，但似乎需要首先进行同行评审。 - Shane Grant

请注意：您仍需要使用 "searching: true" 选项，然后可能希望隐藏默认搜索框，因此只需将 sDOM 选项设置为 null 即可。 - bang

使用小写字母"d"进行$().dataTable()实例化将返回一个jQuery对象，而不是DataTables API实例。要获得后者，需要使用大写字母"D"调用"oTable = $('#myTable').DataTable();"。这是为了能够在其上调用.search（否则会抛出“function undefined”错误）。参见：https://www.datatables.net/faqs/#api - Lionel

Answer 2

根据 @lvkz 的评论：

如果您使用带有大写字母 D 的 datatable .DataTable()（这将返回一个 Datatable API 对象），请使用以下代码：

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

这是@netbrain的答案。

如果您使用小写字母d的datatable .dataTable()（这将返回一个jQuery对象），请使用以下内容：

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

- zizoujab

---

"oTable.fnFilter($(this).val());" 对我也有效。 - shabeer90

这两种方法都有效，取决于你如何调用datatable： 当你使用.DataTable()时，使用oTable.search($(this).val()).draw(); 当你使用.dataTable()时，使用oTable.fnFilter($(this).val()); 区别在于D的大小写。希望能帮到你！ - Lvkz

对于 datatables 版本 1.10.5，会出现“oTable.fnFilter 不是函数”的错误。 - Ege Bayrak

刚刚发现使用jQuery，你也可以像这样访问数据库API： oTable.api().search($(this).val()).draw(); 这非常有用，特别是如果你想手动控制分页的长度： oTable.api().page.len($(this).val()).draw(); - Ghis

Answer 3

你可以使用sDom选项来实现此功能。

默认情况下，搜索输入框在自己的

中。

sDom: '<"search-box"r>lftip'

如果您使用jQuery UI（将bjQueryUI设置为true）：

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

上述代码将把搜索/过滤“input”元素放入自己的

中，该

具有名为“search-box”的类，该

位于实际表格之外。

即使它使用了特殊的速记语法，它实际上可以接受任何你提供的HTML。

- mekwall

---

@Marcus：实际上，我觉得 sDom 的使用并不是很优雅，撇开我们无法完全自定义搜索框（搜索框中有一个硬编码的“搜索”文本）这一事实。 - Hoàng Long

但它仍然在div.datatables_Wrapper内部，有没有办法将其移动到外面？ - Artur79

很遗憾，没有。至少不对Datatables源代码进行黑客攻击是不行的。 - mekwall

<333 这个语法 '<"search-box"r><"H"lf>t<"F"ip>' 不确定是否存在更糟糕的东西。 - Cristian E.

@HoàngLong，你实际上可以使用以下选项自定义搜索框：language: { search: "example", searchPlaceholder: "example" } - Flimm

Answer 4

对于最近和新版本的DataTables，您应该按照以下步骤操作：

1- searching选项必须为true。

2- 隐藏默认搜索输入：

.dataTables_filter {
    display: none;
}

3- 添加新的搜索输入：

<input type="text" id="search">

4- 请求搜索：

$('#search').keyup(function() {
    var table = $('.table-meetups').DataTable();
    table.search($(this).val()).draw();
});

- Abolfazl Mohajeri

Answer 5

这个对我在DataTables 1.10.4版本上很有帮助，因为它有新的API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

- cinnamonbear

---

请注意 "var oTable = $('#myTable').DataTable();" 中的大写字母"D" (https://www.datatables.net/faqs/#api)。 - Lionel

Answer 6

我遇到了同样的问题。

我尝试了所有发布的替代方案，但都无效。最终我使用了一种不正当的方法，但它完美地解决了问题。

示例搜索输入

<input id="searchInput" type="text"> 

jQuery代码

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#searchInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

- Bruno Ribeiro

---

感谢您提供隐藏搜索输入和“input”事件的提示。但请注意，您正在 .on("input" 中实例化另一个 DataTable。 - Sravan

Answer 7

更近期的版本有不同的语法：

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

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

请注意，此示例使用在 datatables 首次初始化时分配的变量 table。如果您没有此变量可用，只需使用以下内容即可：

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

- Jonny

Answer 8

我希望您能够在@netbrain's answer的相关内容中添加一些内容，以防您使用服务器端处理（请参见serverSide选项）。

默认情况下，datatables执行的查询限制（请参见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

Answer 9

这应该适合您的需求：（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

Answer 10

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

- Senanayaka