Datatables日期範圍過濾 - ReferenceError：表未定義

Question

我使用Datatables並希望添加額外的日期過濾功能，我在環視了一個谷歌示例並嘗試了許多不同的示例，但它們都沒有工作，我檢查瀏覽器控制檯顯示錯誤ReferenceError: oTable is not defined。

有人能幫我找出下面的腳本出了什麼問題嗎？

CODE：

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

您已經定義oTable內if條件，因此只有內部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/

現在的問題