0

我很高兴收到关于我的另一个问题的以下日期排序代码:) 但我有一个快速查询。

如何按从 min-date 到 max-date 的顺序显示 min-date 和 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;
}
4

2 回答 2

1

这是一个可以工作的补充功能：

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());
    });
}

然后只需从你的filter()函数内部调用它.eachwith orderAsc($(this))。

我建议仅在您第一次加载页面以及将新内容加载到其中以节省客户端的 CPU 处理时才对表格进行排序，无论如何，这是带有一些评论的工作小提琴。=]

于 2012-06-03T06:46:42.890 回答
0

然后你必须使用你可以为你的结果调用每个新负载进行排序

即jQuery

1-如果您想使用此问题答案Using jQuery tablesorter to sort mm/yy dates 它很有用但需要自定义。

2-使用 jQuery 对元素进行排序

要使用 tablesorter 插件，请在 HTML 文档的标记中包含 jQuery 库和 tablesorter 插件：

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

tablesorter 适用于标准 HTML 表格。您必须包含 THEAD 和 TBODY 标签：

<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>

首先告诉 tablesorter 在加载文档时对表格进行排序：

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

单击标题，您会看到您的表格现在可以排序了！您还可以在初始化表时传入配置选项。这告诉 tablesorter 按升序对第一列和第二列进行排序。

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

注意！tablesorter 将自动检测大多数数据类型，包括数字、日期、IP 地址以获取更多信息，请参阅示例

于 2012-06-03T05:56:10.463 回答