2

我的数据表的标题中有日期选择器。我这里需要两件事。

一，在表外工作的完全相同的日期选择器将不能在标题中工作（或包括日历图标）。我也尝试过通过 DOM 实现这些，但仍然没有用，而且这种方式看起来不那么混乱。

第二，这些日期选择器应该充当表格的过滤器。因此，从 10 月 2 日到 10 月 4 日应该隐藏该括号之外的所有日期。有任何想法吗？提前致谢。

http://jsfiddle.net/Z85QC/12/

jQuery

$(".datepick").datepicker({
    showOn: "both",
    buttonImage: "http://www.effinghamparkdistrict.org/graphics/calendar_icon.png"
});

$('#example').dataTable({
    "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});

$("<div class='nBreak padR'><label>Date Filter:</label>&nbsp;&nbsp;From <input type='text' class='datepick' />&nbsp;To <input type='text' class='datepick' /></div>").prependTo('div.dataTables_filter');
4

1 回答 1

3 
var oTable = $('#example').dataTable({
    "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"]
    ],
        "iDisplayLength": 10
});

//added id's to text inputs to aid in attaching event listeners on date selects
$("<div class='nBreak padR'><label>Date Filter:</label>&nbsp;&nbsp;From <input id='min' type='text' class='datepick' />&nbsp;To <input id='max' type='text' class='datepick' /></div>").prependTo('div.dataTables_filter');

//datepicker initialization move to AFTER creation of the datatable so plugin could do it's thing
$(".datepick").datepicker({
    showOn: "both",
    buttonImage: "http://www.effinghamparkdistrict.org/graphics/calendar_icon.png"
});

//datatable documentation to push custom filtering functions
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex){
        var iMin = document.getElementById('min').value;
        var iMax = document.getElementById('max').value;

        if(iMin == null || iMin == "")      {
            return true;
        }
        if(iMax == null || iMax == "")      {
            return true;
        }

        var minDate = new Date(iMin);
        var maxDate = new Date(iMax);

        var date = new Date(aData[1]); //column index 1 contains dates

        if( minDate <= date && date <= maxDate){
            return true;
        }
        return false;
    }
);

//Added events for listening to datepicker selects that will trigger the table to redraw and run the custom filtering
$('#min').datepicker("option","onSelect",function(dateString){
    oTable.fnDraw();
});

$('#max').datepicker("option","onSelect",function(dateString){
    oTable.fnDraw();
});

以下是更改（在代码中注释），基本上您需要：

  • 在创建网格后移动 datepicker 初始化，以便在其标题中创建 datepicker。
  • 数据网格中的日期选择器被赋予了 ID，因此我们可以轻松地将侦听器附加到它们。
  • 数据表的文档允许用户使用 afnFiltering.push 调用定义自定义过滤规则 ( http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html )
  • 最后，我们将 onselect 侦听器附加到 datagrid 日期选择器，以便重新绘制表格并运行自定义过滤功能。

所有这些都在这里演示：http: //jsfiddle.net/RP6Wn/

于 2013-10-29T19:37:41.043 回答