如何向数据表标头添加其他筛选器

How to add additional filters to Datatables header?

本文关键字：添加 其他 筛选 数据表      更新时间：2023-09-26

我需要对这个数据表发生两件不同的事情：

一：我需要将 From 和 To 日期选择器输入添加到我的数据表的标头中，其中包含 bJQueryUI。我找到了这个讨论，http://datatables.net/forums/discussion/comment/16235 但正如您在我的小提琴中看到的那样，我的输入仍然没有添加到标题中。下面的示例代码也是如此。

第二：在这些输入内单击时，日期选择器小部件会显示并允许您选择一个日期。我需要在特定日期之间过滤表格。正如您在此示例中看到的，我包含 10 月 1 日至 7 日，但也许我想在 10 月 4 日至 6 日之间过滤它。因此，在更改 To 输入时，表应相应地进行过滤。有什么想法吗？提前谢谢。

http://jsfiddle.net/BWCBX/24/

jQuery 

$('#example').dataTable({
    "sDom": 'R<C><"process_status">T<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});
$(".process_status").html("From <input type='text' class='datepick' />&nbsp;<span class='icoMoon icon-calendar-10 icon-set delBlue' title='Revert'></span> To <input type='text' class='datepick' />&nbsp;<span class='icoMoon icon-calendar-13 icon-set delBlue' title='Revert'></span>");

您可以使用我的 Yet Another DataTables 列过滤器 - （yadcf） 插件，

像这样使用 filter_type 属性：

filter_type: "range_date"

此外，请检查 date_format 属性，以防您想要与默认日期格式不同的日期格式mm/dd/yyyy

相关文章：