我需要你的幫助。我從數據表創建一個表。我想使用日期範圍過濾表中的數據,但我的代碼不起作用。我知道這裏有很多問題&這樣的問題。我檢查過,但仍然無法解決我的問題在日期範圍之間過濾數據表
// 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>
你可以分析代碼,究竟錯
你知道有一個插件嗎? https://datatables.net/plug-ins/filtering/row-based/range_dates – Yuri
我知道。但我使用這個教程[鏈接](http://www.thoughtdelimited.org/thoughts/demos/dataTablesDateRange/)。我發現了很多插件。但最重要的是'$ .fn.dataTableExt.afnFiltering.push'。全部插件都是用這個 –
你禁用了過濾......''filter「:false,'刪除它 – Yuri