jQuery display date in order from min to max

问题

I am grateful to have received the following date sorting code on another one of my questions :) but I have a quick query.

How could I make the result of the min-date and max-date apear in order from min-date to max-date?

jQuery:

$(function() {
    $.datepicker.setDefaults({ dateFormat: "dd/mm/yy" }); //sets default datepicker's dateFormat
    $("#mindate, #maxdate")
        .datepicker() //initializes both of the date inputs as jQuery UI datepickers
        .on('keypress keyup change blur', function(){ filter(); }); //sets listeners to filter the table on the fly
});

function filter(){
    $('tr').show(); //resets table to default before executing the filter
    datefields = $('table.bordered tr td:nth-child(2)'); //stores a jquery oject containing all tds of the 2nd column (dates)
    datefields.each(function(){ //iterates through them..
        var evdate = pdate($(this).html()); //evaluates each of their dates as date objects
        var mindate = pdate($('#mindate').val()); //evaluates the entered mindate (will return false if not valid*)
        if (mindate) //checks if the mindate is valid
            if (evdate < mindate)
                $(this).parent().hide(); //hides the row if its date is previous to the mindate
        var maxdate = pdate($('#maxdate').val()); //repeats same as above, now for maxdate filtering
        if (maxdate)
            if (evdate > maxdate)
                $(this).parent().hide(); //hides the row if its date is after the maxdate
    });

}

function pdate(str){ //parse date function, receives a string and returns a date if it's valid or false if it isn't
    if (!isValidDate(str))
        return false; //returns false if the date isn't valid
    var parts = str.split("/");
    // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
    return new Date(parts[2], parts[1]-1, parts[0]);
}



//this is my custom date validating function, much better than those which you may find in the web :P
function isValidDate(date)
{    
    parts = date.split('/');
    if (parts.length != 3)
        return false;
    else if (parts[0] == '' || /[^0-9]/.test(parts[0]) || parts[1] == '' || /[^0-9]/.test(parts[1]) || parts[2] == '' || /[^0-9]/.test(parts[2]))
        return false;

    day = parts[0];
    month = parts[1];
    year = parts[2];

    if (year >= 1800 && year <= 2200) //define the limits of valid dates
    {
        if (day > 0 && day <= 31 && month > 0 && month <= 12)
        {  
            if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30)
                return false;
            if (month == 2)
            {
                if (year%4 == 0 && (year%100 != 0 || year%400==0))
                {
                    if (day > 29)
                        return false; 
                }
                else if (day > 28)
                    return false;
            }
            return true;
        }
        else
            return false;
    }
    else
        return false;
}

回答1:

Here's a complementary function that will work:

function orderAsc(td){
    var evdate = pdate(td.html());
    var datefields = $('table.bordered tr td:nth-child(2)');
    datefields.each(function(i){
        var tempdate = pdate($(this).html());
        if (evdate > tempdate)
            td.parent().before($(this).parent());
    });
}

Then just call it from inside your filter() function's .each with orderAsc($(this)).

I'd suggest sorting your table only when you first load the page and when you load new content into it to save CPU processing in your clients' side, anyway, here's the working Fiddle with some comments. =]

回答2:

then you have to sort using you can call on every new load for you result

i.e JQuery

1- if you want use this question answer Using jQuery tablesorter to sort mm/yy dates its usefull but need customization.

2- Sorting elements with jQuery

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the tag of your HTML document:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

Start by telling tablesorter to sort your table when the document is loaded:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see Examples

来源：https://stackoverflow.com/questions/10868035/jquery-display-date-in-order-from-min-to-max

标签

jquery

datepicker