为jQuery数据表实现自定义sSortType和排序函数 [英] Implementing a custom sSortType and sort function for jQuery dataTables

问题描述

我很难按照文档页面上的说明进行操作。我有一张表格，以HH：MM格式显示一列中的平均持续时间，例如10:45表示十小时四十五分钟。我想通过这一列中的值对整个表进行排序。

I'm having a hard time following the instructions on the documentation page. I have a table displaying the average time durations in one column, in the HH:MM format, e.g 10:45 means ten hours and forty-five minutes. I would like to be able to sort my entire table by the values in this column.

这是我的初始化代码：

    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到我的表中：

Here is what I ASSUME to be the proper way to add a new sort function and a new sSortType into my table:

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

我想有一个比我做的更好的方法来提取分钟数，但我们假设我的算法是有效的。我该怎么做才能正确地初始化我的dataTable并将此排序函数和数据类型集成到其中？表本身正确呈现，但是当我尝试对列进行排序时，它会按字典排序，就像它是一个字符串一样。
任何想法？

I suppose there is a much better way for extracting the number of minutes than the way I do it, but let's suppose my algorithm is valid. What must I do to initialize my dataTable properly and integrate this sort function and data type into it? The table itself renders properly, but when I try to sort the column in question, it sort itself lexicographically, as if it were a string. Any ideas?

推荐答案

您应该同时提供< type> / code>方法和一个< 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数据表实现自定义sSortType和排序函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！