如何向Datatables标头添加其他过滤器?

时间:2013-10-23 18:48:33

标签: javascript jquery dom filter datatables

我需要在这个数据表中发生两件不同的事情:

一:我需要将From和To datepicker输入添加到我的Datatable的标题中,包含bJQueryUI。我发现了这个讨论,http://datatables.net/forums/discussion/comment/16235但正如你在我的小提琴中看到的那样,我的输入仍然没有添加到标题中。下面的示例代码也是如此。

二:在这些输入中单击时,datepicker小部件显示并允许您选择日期。我需要在特定日期之间过滤表格。正如你在这个例子中看到的那样,我包含了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>");

1 个答案:

答案 0 :(得分:1)

您可以使用我的Yet Another DataTables Column Filter - (yadcf)插件

使用filter_type属性,如下所示:

filter_type: "range_date"

如果您希望日期格式与默认格式date_format不同,请检查mm/dd/yyyy属性