javascript - DataTables header 中的 jQuery UI Datepicker 未生成？

Question

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

第一，在表外工作的相同日期选择器将无法在标题内工作(或包含日历图标)。我也尝试过通过 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');

Answer 1

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();
});

以下是更改(在代码中注释)，基本上您需要:

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

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