Question

我想知道如何正确排序日期。我正在使用jquery插件数据表（http://datatables.net/）。

我还在这个网站上找到了一个有用的插件来解决我的问题，我将其整合到我的代码中。我的JS代码看起来像这样：

<script>
$(document).ready(function() {

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

   var oTable = $('#example').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            null,
            { "sType": "uk_date" },
            null,
            null,
            null,
            null,
            null
        ]
    } );


$(".search_init").click(function(){
    var input_value = $(this).val();
    $(this).val("");
});     

$("tfoot input").keyup( function () {
    oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

});
</script>

我的表格如下：

<table id="example">
<thead>
    <tr>
        <th>Some Text</th>
        <th>Date</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
        <th>Some Text</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Some text</td>
        <td>22/07/2011</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
    </tr>
    ...
</tbody>
<tfoot>
    <tr>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
        <td><input type="text" class="search_init" value="Text" /></td>
    </tr>
</tfoot>
</table>

有人可以解释一下为什么这不起作用吗？我能够对每个列进行排序，除了包含日期的列。

我包含以下库：

<script src="[PATH]/js/jquery-1.6.2.min.js" language="JavaScript" type="text/javascript"></script>
<script src="[PATH]/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="[PATH]/js/jquery.dataTables.min.js" language="JavaScript" type="text/javascript"></script>
<script src="[PATH]/js/ZeroClipboard.js" type="text/javascript" charset="utf-8"></script>
<script src="[PATH]/js/TableTools.js" type="text/javascript" charset="utf-8"></script>

Answer 1

如果您有兴趣尝试其他插件，这里是我过去使用的热门Tablesorter插件的解决方案。基本上只需使用插件并为您的日期创建自定义解析器。

这是我创建的日期解析器：

/*
* Parser Type: DateTime
* Parser Format: "ddd, MMM d, yyyy h:mm tt"
*/
$.tablesorter.addParser({
    // set a unique id
    id: 'LongDateTimeFormat',
    is: function (s) {
        // return false so this parser is not auto detected 
        return false;
    },
    format: function (s) {
        s = s.trim();

        // format your data for normalization
        s = s.match(/(?!^[A-Za-z]{3}, )[A-Za-z]{3} [0-9]{1,2}, [0-9]{4} [0-9]{1,2}:[0-9]{2}/) + ":00 " + s.match(/[A-Z]{2}$/);

        return new Date(s).getTime();
    },
    // set type, either numeric or text 
    type: 'numeric'
});

预期日期格式为“ddd，MMM d，yyyy h：mm tt”，如上所示。解析器将日期字符串转换为日期对象，并返回自1970年1月1日午夜到指定日期的毫秒数。

Answer 2

这个对我有用。

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "uk_date-pre": function (a) {       

          if (a!=""&&a!=null)
            {
              var date = a.split('/');
              var x= (Number(date[2]) * 10000 + Number(date[1]) * 100 + Number(date[0])) * 1;
              return x;
            }
            else return 0;
            },

            "uk_date-asc": function (a, b) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },

            "uk_date-desc": function (a, b) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        });

Answer 3

只需在＆＃34; YYYYMMDD＆＃34;中写日期格式里面的样式在日期视图之前显示无。

示例代码

<table id="example" class="table" width="100%" cellspacing="0" data-order='[[ 1, "asc" ]]' data-page-length='100'>
                        <thead>
                            <tr>
                                <th>Sl.No</th>
                                <th>Date</th>
                                <th>Name</th>
                            </tr>
                        </thead>

                        <tbody>
        <tr>
            <td>1</td>
            <td><span style="display:none;">YYYYMMDD</span>DD/MM/YYYY</td>
            <td>P K Jena</td>
        </tr>
        <tr>
            <td>2</td>
            <td><span style="display:none;">YYYYMMDD</span>DD/MM/YYYY</td>
            <td>P Kumar</td>
        </tr>
</tbody>
</table>

如何使用jQuery插件数据表正确排序日期

3 个答案:

示例代码