在日期范围之间筛选数据表

Filtering datatable between date ranges

本文关键字：筛选 数据表 之间 范围 日期      更新时间：2023-09-26

我需要你的帮助。我从数据表创建一个表。我想使用日期范围过滤表中的数据，但我的代码不起作用。我知道有很多问题& &;像这样的问题。我之前检查过了，但仍然无法解决我的问题

// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex){
	var dateStart = parseDateValue($("#min").val());
	var dateEnd = parseDateValue($("#max").val());
	// aData represents the table structure as an array of columns, so the script access the date value 
	// in the first column of the table via aData[0]
	var evalDate= parseDateValue(aData[0]);
	if (evalDate >= dateStart && evalDate <= dateEnd) {
		return true;
	}
	else {
		return false;
	}
	
});
// Function for converting a dd M yyyy date value into a numeric string for comparison (example 12 Oct 2010 becomes 20101012
function parseDateValue(rawDate) {
	var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var dateArray = rawDate.split(" ");
	var numMonth = Number(month.indexOf(dateArray[1]))+1;
	if(numMonth.toString().length<2){
		numMonth = "0"+numMonth;
	} else {
		numMonth = numMonth.toString();
	}
	var parsedDate = dateArray[2] + numMonth + dateArray[0];
	return parsedDate;
}
$(document).ready(function(){			
	var oTable = $('#table-mutasi').dataTable({
		"iDisplayLength": 25,
		"filter":   false,
		"lengthChange": false,
		"ordering": false,
		"info":     false
	});
	
	$('#min,#max').datepicker({
		format: "dd M yyyy",
		weekStart: 1,
		daysOfWeekHighlighted: "0",
		autoclose: true,
		todayHighlight: true
	});
	
	// Add event listeners to the two range filtering inputs
	$('#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">
	<div class="input-group input-daterange">
		<input type="text" id="min" class="form-control" value="04 Nov 2016">
		<span class="input-group-addon">to</span>
		<input type="text" id="max" class="form-control" value="04 Nov 2016">
	</div>
</div>
<table class="table table-striped table-bordered table-hover table-condensed" id="table-mutasi">
	<thead>
		<tr>
			<th>Date</th>
			<th>Product</th>
			<th>Point</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>30 Oct 2016 16:20</td>
			<td>PX5</td>
			<td>50</td>
		</tr>
		<tr>
			<td>02 Nov 2016 16:20</td>
			<td>PLN100</td>
			<td>250</td>
		</tr>
		<tr>
			<td>04 Nov 2016 16:20</td>
			<td>IJ10</td>
			<td>50</td>
		</tr>
	</tbody>
</table>

你能分析一下这段代码吗，到底哪里出了问题

在dataTable()初始化时禁用了表过滤。正确的

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

检查这个工作小提琴

相关文章：