带有百分比列的 DataTables 和 ColumnFilter答案

【问题标题】：DataTables and ColumnFilter with percentage column带有百分比列的 DataTables 和 ColumnFilter
【发布时间】：2014-01-27 11:01:00
【问题描述】：

我已使用以下代码将百分比列添加到我的数据表中：

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "percent-pre": function (a) {
        var x = (a == "-") ? 0 : a.replace(/%/, "");
        return parseFloat(x);
    },

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

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

这样我可以对具有“%”的列进行排序。

我还在我的表中添加了 ColumnFilter 插件 (Plugin Link) 以便能够过滤各个列。

当我保存百分比值并将其显示为数字时，我可以过滤该列： Fiddle Demo

但是当我将该列类型设置为百分比并尝试过滤同一列时，我总是得到空数据： Fiddle Demo

打开第一个小提琴并单击“加载数据”并尝试为“%”列设置范围 - 一切正常。现在对第二个做同样的事情 - 你会得到空桌子。

如何将范围过滤器应用于具有百分比值的列？

【问题讨论】：

标签： javascript jquery sorting datatables jquery-datatables

【解决方案1】：

事实证明这很容易。
将百分比值存储为数字并声明列如下：

{
    sTitle: "%",
    sType: "numeric",
    sWidth: "40px",
    sClass: "center",
    mData: "percent",
    mRender: function (data, type, full) {
        if (type === 'display') {//this is available in DataTables 1.9+
            return data + ' %';
        }
        return data;
    }
}

这是我的更新和工作jsFiddle

【讨论】：