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

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

jquery sorting datatables

如何使用jQuery插件数据表按日期正确排序,jquery,sorting,datatables,date-sorting,Jquery,Sorting,Datatables,Date Sorting,我想知道如何正确地按日期对我的桌子排序。我将jquery与插件数据表一起使用(http://datatables.net/) 我还发现了一个有用的插件在这个网站上为我的问题，我集成到我的代码。我的JS代码如下所示： <script> $(document).ready(function() { jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) { var ukDatea = a.split('/')

我想知道如何正确地按日期对我的桌子排序。我将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>


$（文档）.ready（函数（）{
jQuery.fn.dataTableExt.oSort['uk_date-asc']=函数（a，b）{
var-ukDatea=a.split（'/'）；
var-ukDateb=b.split（'/'）；
变量x=（ukDatea[2]+ukDatea[1]+ukDatea[0]）*1；
变量y=（ukDateb[2]+ukDateb[1]+ukDateb[0]）*1；
回报率（（xy）？1:0）；
};
jQuery.fn.dataTableExt.oSort['uk_date-desc']=函数（a，b）{
var-ukDatea=a.split（'/'）；
var-ukDateb=b.split（'/'）；
变量x=（ukDatea[2]+ukDatea[1]+ukDatea[0]）*1；
变量y=（ukDateb[2]+ukDateb[1]+ukDateb[0]）*1；
回报率（（xy）？-1:0）；
};
var oTable=$（'#示例'）。数据表（{
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“aoColumns”：[
无效的
{“sType”：“uk_date”}，
无效的
无效的
无效的
无效的
无效的
]
} );
$（“.search_init”）。单击（函数（）{
var input_value=$（this.val（）；
$（此）.val（“”）；
});     
$（“tfoot输入”）.keyup（函数（）{
oTable.fnFilter（this.value，$（“tfoot输入”）.index（this））；
} );
});

我的桌子看起来像这样：

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


一些文本
日期
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
22/07/2011
一些文本
一些文本
一些文本
一些文本
一些文本
...

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

我包括以下图书馆：

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

如果您有兴趣尝试另一个插件，下面是我过去使用过的流行插件的解决方案。基本上只需使用插件并为日期创建自定义解析器

以下是我创建解析器的日期：

/*
* 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日午夜到指定日期的毫秒数。

如果您有兴趣尝试另一个插件，下面是我过去使用的流行插件的解决方案。基本上只需使用插件并为日期创建自定义解析器

以下是我创建解析器的日期：

/*
* 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日午夜到指定日期的毫秒数。

这一条对我适用

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

jQuery.extend（jQuery.fn.dataTableExt.oSort{
“uk_date-pre”：职能（a）{
如果（a！=“”&&a！=null）
{
var date=a.split（'/'）；
var x=（编号（日期[2]）*10000+编号（日期[1]）*100+编号（日期[0]）*1；
返回x；
}
否则返回0；
},
“uk_date-asc”：功能（a、b）{
回报率（（ab）？1:0）；
},
“uk_日期描述”：功能（a、b）{
回报率（（ab）？-1:0）；
}
});

这个适合我

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

jQuery.extend（jQuery.fn.dataTableExt.oSort{
“uk_date-pre”：职能（a）{
如果（a！=“”&&a！=null）
{
var date=a.split（'/'）；
var x=（编号（日期[2]）*10000+编号（日期[1]）*100+编号（日期[0]）*1；
返回x；
}
否则返回0；
},
“uk_date-asc”：功能（a、b）{
回报率（（ab）？1:0）；
},
“uk_日期描述”：功能（a、b）{
回报率（（ab）？-1:0）；
}
});

只需以“YYYYMMDD”格式写入日期，其样式为“在日期视图之前显示无”

示例代码


序号
日期
名称
1.
YYYYMMDDD/MM/YYYY
P K耶拿
2.
YYYYMMDDD/MM/YYYY
库马尔

只需以“YYYYMMDD”格式写入日期，其样式为“在日期视图之前显示无”

示例代码


序号
日期
名称
1.
YYYYMMDDD/MM/YYYY
P K耶拿
2.
YYYYMMDDD/MM/YYYY
库马尔

Hey craig感谢您的建议，但我过去已经使用了tablesorter，但决定改为dataTables，这带来了更多功能。。如果真的管用…@DamianFrizzi那太酷了，那我就去看看吧！如果你需要做一些类似于tablesorter的事情，比如创建一个解析器，以便正确地比较日期，我不会感到惊讶。@DamianFrizzi看起来像一个不错的插件，下次会尝试。谢谢我在上面代码中编写的函数应该比较列出的日期并对它们进行排序。。没问题，玩得开心：）@DamianFrizzi对，这是cre的语法