JQuery的datatable里搜索功能怎么修改

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery的datatable里搜索功能怎么修改相关的知识,希望对你有一定的参考价值。

JQuery的datatable里搜索功能修改:
可以自己定义一个 input框 和按钮,点击按钮的时候,调用一个自己定义的函数,函数如下:
function search_fun()
var val = $('#search_val').val();//获取自己定义的input值 dataTable._fnFilter(val);//过 滤dataTable
参考技术A DataTables在默认情况下会显示一个search框(在右上角),一般我们不需要search框,可以通过将searching设为false把它隐藏掉。

Jquery Datatable 搜索框重新定位

【中文标题】Jquery Datatable 搜索框重新定位【英文标题】:Jquery Datatable search box reposition 【发布时间】:2015-05-21 03:43:55 【问题描述】:

我想在 jquery 数据表之外重新定位过滤器框。我想要完全一样:

我该怎么做?

【问题讨论】:

【参考方案1】:

只需使用detach().appendTo()#<table_id>_filter div 重新定位到所需位置,如下所示:

$("#example").DataTable(
    initComplete : function() 
        $("#example_filter").detach().appendTo('#new-search-area');
    
);

您甚至可以设置搜索过滤器框应如何出现在重新定位的位置:

#new-search-area 
    width: 100%;
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;

#new-search-area input 
    width: 600px;
    font-size: 20px;
    padding: 5px;

演示 -> http://jsfiddle.net/dq2bmgd9/

【讨论】:

【参考方案2】:

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

查看有关此的 Datatables API 文档。

例子:

HTML

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

JS

oTable = $('#myTable').dataTable();
$('#myInputTextField').keyup(function()
      oTable.search($(this).val()).draw() ;
)

原文出处Datatables - Search Box outside datatable

【讨论】:

以上是关于JQuery的datatable里搜索功能怎么修改的主要内容,如果未能解决你的问题,请参考以下文章

jquery DataTables 怎么设置仅某列参与搜索?怎么设置精准查询?

Datatables的使用

jQuery DataTables 鼠标点击搜索

Jquery Datatable 搜索框重新定位

datatable使用介绍

怎么改变jQuery datatable插件的表头部分的样式