24

实际上我是 jQuery 数据表插件的新手。

我已使用此代码使用此方法将插件附加到我的表中。

$(document).ready(function() 

         $('#table_id').dataTable({

         });
 });

现在我想要的是数据表提供了一个文本框，我们可以在其中输入我们的过滤器字符串，结果将被过滤。

因此，我想为此目的使用我现有的设计文本框，我不想在 UI 中添加新的文本框。所以我通过了这个链接

http://datatables.net/examples/basic_init/dom.html

但我不明白。是否可以使用现有的文本框。请指教

看看我在实现这个数据表之前遇到过这样的情况

在此处输入图像描述

现在，当我应用此数据表插件时，为搜索添加了一个新文本框，我不想添加新文本框，我希望现有文本框实现搜索功能。

4

8 回答 8

63

这很简单。首先，您必须隐藏默认搜索框：

.dataTables_filter {
   display: none;
}

您自己设计的搜索框示例，放置在 HTML 中的某处：

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

在搜索框中键入时搜索/过滤的脚本

$("#searchbox").keyup(function() {
   dataTable.fnFilter(this.value);
});

工作演示-> http://jsfiddle.net/TbrtF/

如果您使用的是 DataTables 1.10，则 JS 应如下所示：

$("#searchbox").on("keyup search input paste cut", function() {
   dataTable.search(this.value).draw();
});
于 2013-10-09T15:54:31.697 回答
17

您可以定义一个新元素newSearchPlace以在其中包含数据表搜索过滤器：

<div id="newSearchPlace"></div>

然后将搜索过滤器放在这个新地方：

$("#newSearchPlace").html($(".dataTables_filter"));
于 2016-02-16T14:07:19.793 回答
7

要删除过滤器选项，您可以使用其他答案中提到的 css，或者您可以在初始化数据表时使用以下方法将其删除：

$("#table").dataTable({"bFilter": false}); //disables filter input

或通过使用sDom这样的属性：

 "sDom": '<"H"lr>t<"F"ip>' //when bJuery is true

有关更多选项，请参见此处http://datatables.net/usage/options#sDom。

现在关于使用您自己的文本字段作为过滤器框，然后将keypress处理程序附加到它，并使用如下fnFilter选项：

$(document).ready(function() 

     oTable = $('#table_id').dataTable({
         "sDom": '<"H"lr>t<"F"ip>' 
     });
     $('#myInputTextField').keypress(function(){
         oTable.fnFilter( $(this).val() );
     });
 });
于 2013-10-10T06:03:24.410 回答
1

您可以使用 css 轻松更改搜索输入的样式

在 css 文件中：

.dataTables_filter input {
     background: blue;
}

使用 Javascript

$(".dataTables_filter input").css({ "background" :"blue" });

通过将其粘贴到您的控制台来尝试。

于 2013-10-09T14:14:15.673 回答
1

对于 2018 年 12 月的实际版本（v1.10.19），您需要执行以下步骤：

  1. 隐藏默认搜索框 (CSS)：

    .dataTables_filter { display: none; }

  2. 将新过滤器添加到您想要的位置 (HTML)

    Search:<br><input type="text" id="searchFilter">

  3. 在您的 DataTables 初始化功能之后，您需要编写您的搜索功能（JS）：

    $(document).ready(function() {
   var table = $('#example').DataTable();

$('#searchFilter').on( 'keyup', function () {
   table.search( this.value ).draw();
} );

注意：不推荐使用 fnfilter，所以使用 search()，但是 search() 不会重绘表格，所以你也需要使用 draw()。

于 2018-12-20T16:25:32.530 回答
1

从 DataTables 1.10 开始，dom可以将属性添加到初始化中。虽然很难掌握，但它可用于将所有 DataTables 对象包装在<div>元素中，以设置内置表格控制元素的样式。

如下所示的dom属性将使用您选择的 a 包装默认搜索栏<div>，可用于向左拉（其中f是过滤/搜索栏，t是表格：

$('#example').dataTable( {
  "dom": '<"pull-left" f><t>'
} );

输出：

<div class="pull-left">
  <div id="example_filter" class="dataTables_filter"><label><input type="search" aria-controls="example"></label></div>
</div>
<div>
  <table id="example" class="table dt-responsive nowrap dataTable no-footer dtr-inline" style="width: 100%;" role="grid">
</div>

更多信息：DataTables dom 选项

于 2019-06-03T15:07:53.717 回答
0

是的，你可以在你的 CSS 中创建一个类，例如：

.pull-left{
    float: left !important;
}

然后使用 jquery 或 javascript 将此类添加到数据表搜索 div。

例子：

$('.dataTables_filter').addClass('pull-left');

确保您的脚本位于 html 的头部。

于 2017-01-06T00:59:14.530 回答
0

JavaScript 代码是 "dom": '<"top"f>rt<"bottom"><"clear">',

和 CSS div.dataTables_wrapper div.dataTables_filter{ text-align: left; }

于 2020-06-26T09:32:51.433 回答