2016-11-04 43 views
0

我需要你的幫助。我從數據表創建一個表。我想使用日期範圍過濾表中的數據,但我的代碼不起作用。我知道這裏有很多問題&這樣的問題。我檢查過,但仍然無法解決我的問題在日期範圍之間過濾數據表

// The plugin function for adding a new filtering routine 
 
$.fn.dataTableExt.afnFiltering.push(
 
function(oSettings, aData, iDataIndex){ 
 
\t var dateStart = parseDateValue($("#min").val()); 
 
\t var dateEnd = parseDateValue($("#max").val()); 
 
\t // aData represents the table structure as an array of columns, so the script access the date value 
 
\t // in the first column of the table via aData[0] 
 
\t var evalDate= parseDateValue(aData[0]); 
 

 
\t if (evalDate >= dateStart && evalDate <= dateEnd) { 
 
\t \t return true; 
 
\t } 
 
\t else { 
 
\t \t return false; 
 
\t } 
 
\t 
 
}); 
 

 
// Function for converting a dd M yyyy date value into a numeric string for comparison (example 12 Oct 2010 becomes 20101012 
 
function parseDateValue(rawDate) { 
 
\t var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
 
\t var dateArray = rawDate.split(" "); 
 
\t var numMonth = Number(month.indexOf(dateArray[1]))+1; 
 
\t if(numMonth.toString().length<2){ 
 
\t \t numMonth = "0"+numMonth; 
 
\t } else { 
 
\t \t numMonth = numMonth.toString(); 
 
\t } 
 
\t var parsedDate = dateArray[2] + numMonth + dateArray[0]; 
 
\t return parsedDate; 
 
} 
 

 
$(document).ready(function(){ \t \t \t 
 
\t var oTable = $('#table-mutasi').dataTable({ 
 
\t \t "iDisplayLength": 25, 
 
\t \t "filter": false, 
 
\t \t "lengthChange": false, 
 
\t \t "ordering": false, 
 
\t \t "info":  false 
 
\t }); 
 
\t 
 
\t $('#min,#max').datepicker({ 
 
\t \t format: "dd M yyyy", 
 
\t \t weekStart: 1, 
 
\t \t daysOfWeekHighlighted: "0", 
 
\t \t autoclose: true, 
 
\t \t todayHighlight: true 
 
\t }); 
 
\t 
 
\t // Add event listeners to the two range filtering inputs 
 
\t $('#min,#max').change(function(){ oTable.fnDraw(); }); 
 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" rel="stylesheet" type="text/css"> 
 
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js" type="text/javascript"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" type="text/javascript"></script> 
 

 

 
<div class="form-group"> 
 
\t <div class="input-group input-daterange"> 
 
\t \t <input type="text" id="min" class="form-control" value="04 Nov 2016"> 
 
\t \t <span class="input-group-addon">to</span> 
 
\t \t <input type="text" id="max" class="form-control" value="04 Nov 2016"> 
 
\t </div> 
 
</div> 
 
<table class="table table-striped table-bordered table-hover table-condensed" id="table-mutasi"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th>Date</th> 
 
\t \t \t <th>Product</th> 
 
\t \t \t <th>Point</th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td>30 Oct 2016 16:20</td> 
 
\t \t \t <td>PX5</td> 
 
\t \t \t <td>50</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>02 Nov 2016 16:20</td> 
 
\t \t \t <td>PLN100</td> 
 
\t \t \t <td>250</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>04 Nov 2016 16:20</td> 
 
\t \t \t <td>IJ10</td> 
 
\t \t \t <td>50</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

你可以分析代碼,究竟錯

+0

你知道有一個插件嗎? https://datatables.net/plug-ins/filtering/row-based/range_dates – Yuri

+0

我知道。但我使用這個教程[鏈接](http://www.thoughtdelimited.org/thoughts/demos/dataTablesDateRange/)。我發現了很多插件。但最重要的是'$ .fn.dataTableExt.afnFiltering.push'。全部插件都是用這個 –

+0

你禁用了過濾......''filter「:false,'刪除它 – Yuri

回答

2

您DataTable中禁用表過濾()初始化.. 正確的

var oTable = $('#table-mutasi').dataTable({ 
    "iDisplayLength": 25, 
    "lengthChange": false, 
    "ordering": false, 
    "info":  false 
}); 

檢查該工作fiddle

+1

打敗我吧,雖然我也會用'momentary'替換'orrible日期解析一點點作弊(站在巨人的肩膀上)沒有什麼不對)。默認日期也意味着最初不會顯示任何內容,所以我可能會旋轉這些值並將min的最早值和最大值設置爲最新值......我的努力:https://jsfiddle.net/annoyingmouse/ 8mgu8zux/ – annoyingmouse

+0

@annoyingmouse它使我的代碼更短。謝謝 –