Question

我有以下超链接网格视图列，需要按IncidentId进行数字排序。有没有办法将数据保存为超链接，只能按IncidentId排序？当我使用以下javascript函数对其进行“数字”排序时，它会中断并且列不会排序。如果我将sType声明为“string”或“html”，它会对其进行排序，但它按字母顺序排列数据而不是数字排序，换句话说，它会将其列为93,82,71,40,73,122,121而不是123,122,121,93,82,71,40。

<asp:HyperLinkField HeaderText="Incident ID:" DataNavigateUrlFields="IncidentId" 
DataNavigateUrlFormatString="view.aspx?id={0}" DataTextField="IncidentId"/>


<script type="text/javascript">
    $(function () {
        $('#GridViewIncidents').dataTable({
            "bFilter": false,
            "bSort": true,
            "aoColumnDefs": [{ "sType": "numerical", "aTargets": [0]}]
        });
    });
</script>

Answer 1

您需要覆盖数据表排序函数的默认比较器。

jQuery.fn.dataTableExt.aTypes.unshift(
    function (sData) {
        if (sData !== null && sData.match('^<.*[0-9]+</.*>$')) {
            return 'intComparer';
        }
        return null;
    }
);

上面的代码将找到包含在html标记中的任何整数，并告诉Datatables使用自定义比较器函数。

然后我们需要为此定义比较函数：

    jQuery.fn.dataTableExt.oSort['intComparer-asc'] = function (a, b) {
        var value1 = parseInt(getInnerHTML(a));
        var value2 = parseInt(getInnerHTML(b));
        return ((value1 < value2) ? -1 : ((value1 > value2) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['intComparer-desc'] = function (a, b) {
        var value1 = parseInt(getInnerHTML(a));
        var value2 = parseInt(getInnerHTML(b));
        return ((value1 < value2) ? 1 : ((value1 > value2) ? -1 : 0));
    };

这会剥离标签并按数值排序。

在设置表之前，只需将所有这些代码放在脚本标记中，它就可以工作了！

Answer 2

我的解决方案是先定义一个addType扩展点：

jQuery.extend(jQuery.fn.dataTableExt, {
    addType: function (options) {
        var optionsSpecified = options != null && options.name && options.detect && options.compare;
        if (!optionsSpecified) {
            alert('addColumnType: options are not specified correctly.');
        } else {
            this.aTypes.unshift(function (sData) {
                return options.detect(sData) ? options.name : null;
            });

            this.oSort[options.name + '-asc'] = function (x, y) {
                return options.compare(x, y);
            };

            this.oSort[options.name + '-desc'] = function (x, y) {
                return options.compare(x, y) * -1;
            };
        }
    }
});

此后，我们使用上述扩展点定义用于识别整数链接的扩展名：

(function () {
    var linkRegex = new RegExp("^<a.*>([0-9]+)</a>$");

    function parseIntLink(sData) {
        var result = linkRegex.exec(sData);
        return result == null ? NaN : parseInt(result[1], 10);
    }

    jQuery.fn.dataTableExt.addType({
        name: 'int-link',
        detect: function (sData) {
            return !isNaN(parseIntLink(sData));
        },
        compare: function (x, y) {
            return parseIntLink(x) - parseIntLink(y);
        }
    });
})();

有关详细信息，请参阅此blog。（免责声明：这是我的博客）。

如何以数字方式对DataTable中的超链接进行排序？

2 个答案: