如何对数据表中的超链接进行数字排序

本文关键字：数字 排序 超链接 数据表 | 更新日期: 2023-09-27 18:25:15

我有以下超链接网格视图列，需要按IncidentId进行数字排序。有没有办法将数据保持为超链接，并且只按IncidentId排序？当我使用下面的javascript函数将其排序为"numerical"时，它会中断，列不会排序。如果我将sType声明为"string"或"html"，它会进行排序，但它会按字母顺序排列数据，而不是按数字排序，换句话说，它会将数据列为93、82、71、40、123、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>

如何对数据表中的超链接进行数字排序

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

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

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

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

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

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

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

我的解决方案是首先定义一个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);
        }
    });
})();

请查看此博客了解更多详细信息。（免责声明：这是我的博客）。

相关文章：