如何使用jquery按日期过滤表 [英] How do it table filter by date using jquery
本文介绍了如何使用jquery按日期过滤表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何仅使用jquery插件使用日期范围过滤表数据.我有一个下拉框数据取决于所选的日期,日期范围和值.Howcoz我想在我的网页中添加插件,我们可以使用插件b做到这一点>
HTML:
<input id="seate" name="" type="text">
<input id="seate2" name="" type="text">
<table>
<caption>
Table
</caption>
<thead>
<tr>
<th>No</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>
<tbody class="rody">
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/17</td>
</tr>
<tr scope="row">
<td>12</td>
<td>In-Progress</td>
<td>02/01/18</td>
</tr>
<tr scope="row">
<td>1</td>
<td>In-Progress</td>
<td>11/01/17</td>
</tr>
<tr scope="row">
<td>13</td>
<td>In-Progress</td>
<td>11/08/17</td>
</tr>
<tr scope="row">
<td>14</td>
<td>In-Progress</td>
<td>11/06/17</td>
</tr>
<tr scope="row">
<td>15</td>
<td>In-Progress</td>
<td>11/04/17</td>
</tr>
</tbody>
</table>
解决方案
我已经创建了用于表格过滤器的功能
function display(startDate,endDate) {
//alert(startDate)
startDateArray= startDate.split("/");
endDateArray= endDate.split("/");
var startDateTimeStamp = new Date(startDateArray[2],+startDateArray[0],startDateArray[1]).getTime();
var endDateTimeStamp = new Date(endDateArray[2],+endDateArray[0],endDateArray[1]).getTime();
$("table tbody.mainBody tr").each(function() {
var rowDate = $(this).find('td:eq(2)').html();
rowDateArray= rowDate.split("/");
var rowDateTimeStamp = new Date(rowDateArray[2],+rowDateArray[0],rowDateArray[1]).getTime() ;
// alert(startDateTimeStamp<=rowDateTimeStamp)
// alert(rowDateTimeStamp<=endDateTimeStamp)
if(startDateTimeStamp<=rowDateTimeStamp && rowDateTimeStamp<=endDateTimeStamp) {
$(this).css("display","block");
} else {
$(this).css("display","none");
}
});
}
示例函数调用
display("11/08/2017","02/01/2018")
格式:display(startDate,endDate);
显示30天(currentDate-30,currentDate);
注意请更改html日期格式
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/2017</td>
</tr>
How to filter tables data using date range using only jquery plugins.I have one dropdown box data depends on selected date and date range and values.Howcoz i want to add plugins in my webpage we can do it using plugins b
HTML:
<input id="seate" name="" type="text">
<input id="seate2" name="" type="text">
<table>
<caption>
Table
</caption>
<thead>
<tr>
<th>No</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>
<tbody class="rody">
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/17</td>
</tr>
<tr scope="row">
<td>12</td>
<td>In-Progress</td>
<td>02/01/18</td>
</tr>
<tr scope="row">
<td>1</td>
<td>In-Progress</td>
<td>11/01/17</td>
</tr>
<tr scope="row">
<td>13</td>
<td>In-Progress</td>
<td>11/08/17</td>
</tr>
<tr scope="row">
<td>14</td>
<td>In-Progress</td>
<td>11/06/17</td>
</tr>
<tr scope="row">
<td>15</td>
<td>In-Progress</td>
<td>11/04/17</td>
</tr>
</tbody>
</table>
解决方案
I have created the function for table filter
function display(startDate,endDate) {
//alert(startDate)
startDateArray= startDate.split("/");
endDateArray= endDate.split("/");
var startDateTimeStamp = new Date(startDateArray[2],+startDateArray[0],startDateArray[1]).getTime();
var endDateTimeStamp = new Date(endDateArray[2],+endDateArray[0],endDateArray[1]).getTime();
$("table tbody.mainBody tr").each(function() {
var rowDate = $(this).find('td:eq(2)').html();
rowDateArray= rowDate.split("/");
var rowDateTimeStamp = new Date(rowDateArray[2],+rowDateArray[0],rowDateArray[1]).getTime() ;
// alert(startDateTimeStamp<=rowDateTimeStamp)
// alert(rowDateTimeStamp<=endDateTimeStamp)
if(startDateTimeStamp<=rowDateTimeStamp && rowDateTimeStamp<=endDateTimeStamp) {
$(this).css("display","block");
} else {
$(this).css("display","none");
}
});
}
sample function call
display("11/08/2017","02/01/2018")
Format : display(startDate,endDate);
For 30 days display(currentDate-30,currentDate);
Note Pls change the html date format
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/2017</td>
</tr>
这篇关于如何使用jquery按日期过滤表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文