如何添加额外的过滤器到Datatables头？ [英] How to add additional filters to Datatables header?

问题描述

我需要两个不同的事情发生在这个Datatable：

一个：我需要添加From和To datepicker输入到我的Datatable的头，与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-clearfixlfr> tui-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，全部] 
]，
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>）; 
  

解决方案

您可以使用我的另一个DataTables列过滤器 - （yadcf）插件，

使用 filter_type 属性：

filter_type：range_date

还要检查 date_format 属性，以防您希望日期格式不同于默认值 mm / dd / yyyy

I need two different things to happen to this Datatable:

One: I need to add the From and To datepicker inputs to the header of my Datatable, with bJQueryUI included. I found this discussion, http://datatables.net/forums/discussion/comment/16235 but as you can see in my fiddle my inputs are still not being added to the header. Example code below as well.

Two: When clicking inside these inputs, the datepicker widget shows and allows you to pick a date. I need to filter the table between specific dates. As you can see in this example I have October 1-7 included, but maybe I want to filter it between October 4-6. So, on change of the To input, the table should filter accordingly. Any ideas? Thanks in advance.

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>");

解决方案

You can use my Yet Another DataTables Column Filter - (yadcf) plugin,

use the filter_type attribute like this:

filter_type: "range_date"

Also check the date_format attribute in case that you want a date format different than the default one mm/dd/yyyy

这篇关于如何添加额外的过滤器到Datatables头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！