为jQuery dataTables实现自定义sSortType和sort函数

前端之家收集整理的这篇文章主要介绍了为jQuery dataTables实现自定义sSortType和sort函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我很难按照 documentation页面上的说明操作.我有一个表格,显示一列中的平均持续时间,采用HH:MM格式,例如10:45表示十小时四十五分钟.我希望能够按照此列中的值对整个表进行排序.

这是我的初始化代码

var aoTable = $("#TableStatistic").dataTable({
    "bDestroy": true,"sDom": "<'row-fluid dt-header'<'span6'f><'span6'T>>t<'row-fluid dt-footer'<'span6'i><'span6'p>>","oTableTools": {
        "aButtons": ["xls","pdf","print"],"sSwfPath": "../Content/media/swf/copy_csv_xls_pdf.swf"
    },"aaData": statisticsModel.byCategoriesList(),"aaSorting": [[0,"desc"]],"bPaginate": false,"aoColumns": [
        { "mDataProp": "CategoryName","sTitle": "Reports.CategoryName" },{ "mDataProp": "AverageTime","sTitle": "Reports.AverageTime","sSortDataType": "duration-desc"},{ "mDataProp": "NumberOfProblemsSolved","sTitle": "Reports.NumberOfProblemsSolved" }
    ],"oLanguage": MeridianTranslation.DataTable

});

以下是我认为在我的表中添加新的排序函数和新的sSortType的正确方法

jQuery.extend(jQuery.fn.dataTableExt.oSort['duration-desc'] = function (x,y) {
    var xHours = parseInt(x.slice(0,x.indexOf(':')));
    var xMinutes = parseInt(x.slice(x.indexOf(':') + 1,x.length)) + xHours * 60;
    var yHours = parseInt(y.slice(0,y.indexOf(':')));
    var yMinutes = parseInt(y.slice(y.indexOf(':') + 1,y.length)) + yHours * 60;
    return ((xMinutes < yMinutes) ? -1 : ((xMinutes > yMinutes) ? 1 : 0));
});

jQuery.extend(jQuery.fn.dataTableExt.oSort['duration-asc'] = function (x,x.indexOf(':')));
    var xMinutes = parseInt(x.slice(x.indexOf(':')+1,y.indexOf(':')));
    var yMinutes = parseInt(y.slice(y.indexOf(':')+1,y.length)) + yHours * 60;
    return ((xMinutes < yMinutes) ? 1 : ((xMinutes > yMinutes) ? -1 : 0));
});

我想有一个更好的方法提取分钟数而不是我的方式,但我们假设我的算法是有效的.我该怎么做才能正确初始化我的dataTable并将这种排序函数和数据类型集成到其中?表本身正确呈现,但是当我尝试对相关列进行排序时,它会按字典顺序排序,就像它是一个字符串一样.
有任何想法吗?

解决方法

您应该同时提供< type> -asc方法和< type> -desc方法.

然后排序基于列的sType属性

jQuery.fn.dataTableExt.oSort["duration-desc"] = function (x,y) {
    ...
};

jQuery.fn.dataTableExt.oSort["duration-asc"] = function (x,y) {
    ...
}

var oTable = $("#products").dataTable({
    "aaData": [
        [1,"Dinner","0:40"],[2,"Study","11:25"],[3,"Sleep","7:30"]
    ],"aoColumns": [{
        ...
    },{
        ...
    },{
        ...
        "bSortable": true,"sType": "duration"
    }]

});

这是一个简单的jsFiddle示例.

猜你在找的jQuery相关文章