javascript - How do it table filter by date using jquery

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>

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>

Share Improve this question edited Jan 12, 2018 at 6:31 asked Jan 9, 2018 at 8:26 saranchel n 6232 gold badges9 silver badges19 bronze badges

save the trouble, use plugin. why re-invent the wheel? – Peter Stark Commented Jan 9, 2018 at 8:34
1 I want to do without plugin – saranchel n Commented Jan 9, 2018 at 8:42
If you want to do it by hand, I would convert the 15, 30 days etc into time stamps and the same for the dates. That way doing math on it and paring it with a filter function is very easy. – Falk Commented Jan 9, 2018 at 8:46
Can u edit my jsfiddle? – saranchel n Commented Jan 9, 2018 at 8:55
11/04/17 - DD/MM/Year is correct.can you chage to full year like 2018 – Venka Tesh user5397700 Commented Jan 9, 2018 at 10:05

| Show 5 more ments

2 Answers 2

Sorted by: Reset to default 6

Here is how you could do it. Note also some minor modifications to the 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery./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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do it table filter by date using jquery - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)