如何使用jquery按日期过滤表格

Question

如何使用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>

Answer 1

这是你可以做到的。另请注意对 HTML 的一些小修改：

$(function(){
    // Initialise the inputs on page load:
    var today = new Date().toJSON().replace(/..(..)-(..)-(..).*/, '$2/$3/$1');
    $("#selectDate").datepicker({ dateFormat: 'mm/dd/yy' }).val(today).change(applyFilter);
    $("#selectDate2").datepicker({ dateFormat: 'mm/dd/yy' }).val(today).change(applyFilter);
    $("#rangeval").change(applyFilter);
    $.fn.date = function () {
        return new Date((this.is(':input') ? this.val() : this.text()).replace(//(..)$/, '/20$1'));
    }
    
    function applyFilter() {
        var filterType = $("#rangeval").val(),
            start, end;
        // Set the visibility of the two date fields:
        $("#selectDate").toggle(["Single Date", "Custom Date Range"].indexOf(filterType) > -1);
        $("#selectDate2").toggle(filterType === "Custom Date Range");
        // Depending on the type of filter, set the range of dates (start, end):
        if (filterType === "") {
            // Show all: choose extreme dates
            start = new Date('1000-01-01');
            end = new Date('3000-01-01');
        } else if (!parseInt(filterType)) {
            // Use data entry:
            start = $("#selectDate").date();
            end = filterType === "Custom Date Range" ? $("#selectDate2").date() : start;
        } else {
            // Show last X days:
            start = new Date();
            start.setHours(0,0,0,0);
            start.setDate(start.getDate() - parseInt(filterType));
            end = new Date(); // today
        }
        // For each row: set the visibility depending on the date range
        $(".mainBody tr").each(function () {
            var date = $("td:last-child", this).date();
            $(this).toggle(date >= start && date <= end);
        });
    }
    applyFilter(); // Execute also on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<select class="inputxlg" id="rangeval">
    <option value="">Filter by Date Range</option>
    <option value="15">15 Days</option>
    <option value="30">30 Days</option>
    <option value="90">90 Days</option>
    <option value="365">Last Year</option>
    <option value="Single Date">Single Date</option>
    <option value="Custom Date Range">Custom Date Range</option>
</select>
<input id="selectDate" name="selectDate" type="text">
<input id="selectDate2" name="selectDate" type="text">
<table>
    <caption>
        Table
    </caption>
    <thead>
        <tr>
            <th>No</th>
            <th>Status</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody class="mainBody">
        <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>

Answer 2

我已经为表格过滤器创建了函数

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

天显示(当前日期-30，当前日期(;

注意请更改 html 日期格式

<tr scope="row">
    <td>11</td>
    <td>In-Progress</td>
    <td>11/05/2017</td> 
</tr>