如何使用jquery按日期过滤表 [英] How do it table filter by date using 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屋！