数据表日期范围过滤 - ReferenceError：未定义表

Question

我使用Datatables 并希望添加额外的日期过滤功能，我在google 上查看了一个示例并尝试了许多不同的示例，但没有一个有效，我检查浏览器控制台它显示错误ReferenceError: oTable is not defined。

谁能帮我看看下面的脚本出了什么问题？

代码：

date start: <input name="min" id="min" type="text">
date end: <input name="max" id="max" type="text">


$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();

        if (dd<10)
        dd = '0'+dd;

        if (mm<10)
        mm = '0'+mm;

        today = dd+'/'+mm+'/'+yyyy;

        if ($('#min').val() != '' || $('#max').val() != '') {
        var iMin_temp = $('#min').val();
        if (iMin_temp == '') {
          iMin_temp = '01/01/1980';
        }

        var iMax_temp = $('#max').val();
        if (iMax_temp == '') {
          iMax_temp = today;
        }

        var arr_min = iMin_temp.split("/");
        var arr_max = iMax_temp.split("/");
        var arr_date = aData[2].split("/");

        var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0)
        var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0)
        var iDate = new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0)

        if ( iMin == "" && iMax == "" )
        {
            return true;
        }
        else if ( iMin == "" && iDate < iMax )
        {
            return true;
        }
        else if ( iMin <= iDate && "" == iMax )
        {
            return true;
        }
        else if ( iMin <= iDate && iDate <= iMax )
        {
            return true;
        }
        return false;
        }
    }
);


$(document).ready(function(){

    var handleDataTableButtons = function(){

        if($('#datatable').length){
            var oTable = $('#datatable').dataTable({
                dom: 'Bfrtp',
                buttons: [
                  {
                    extend: "excel",
                    className: "btn-sm"
                  },
                  {
                    extend: "print",
                    className: "btn-sm"
                  },
                ],
                bLengthChange: false,
                bJQueryUI: true,
                responsive: false,
                stateSave: true
            });

        }
    };

    TableManageButtons = function(){
        "use strict";
        return{
            init: function(){
                handleDataTableButtons();
            }
        };
    }();

    TableManageButtons.init();

    $('#min, #max').keyup( function() { oTable.draw(); } );
    $('#min, #max').change( function() { oTable.draw(); } );

    $('#min, #max').datepicker({
        showOn: 'button',
        dateFormat: 'dd/mm/yy',
        buttonImage: 'images/calendar.png',
        buttonImageOnly: false
    });

});

Answer 1

您在 if 条件内定义了 oTable，因此它只能在 if 块内访问。像这样在if 之外定义它

var oTable;
$(document).ready(function(){

var handleDataTableButtons = function(){

    if($('#datatable').length){
      oTable = $('#datatable').dataTable({
            dom: 'Bfrtp',
            buttons: [
              {
                extend: "excel",
                className: "btn-sm"
              },
              {
                extend: "print",
                className: "btn-sm"
              },
            ],
            bLengthChange: false,
            bJQueryUI: true,
            responsive: false,
            stateSave: true
        });

    }
};

TableManageButtons = function(){
    "use strict";
    return{
        init: function(){
            handleDataTableButtons();
        }
    };
}();

TableManageButtons.init();

$('#min, #max').keyup( function() { oTable.draw(); } );
$('#min, #max').change( function() { oTable.draw(); } );

$('#min, #max').datepicker({
    showOn: 'button',
    dateFormat: 'dd/mm/yy',
    buttonImage: 'images/calendar.png',
    buttonImageOnly: false
});
});

Answer 2

''请看一下这个演示，这一定会对你有所帮助。

http://jsfiddle.net/dipakthoke07/evcfespn/96/