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

Question

我有以下超链接网格视图列，需要按 IncidentId 按数字排序。有没有办法将数据保留为超链接并仅按 IncidentId 排序？当我使用以下 javascript 函数对其进行“数字”排序时，它会中断并且该列不会排序。如果我将 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>

Answer 1

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

jQuery.fn.dataTableExt.aTypes.unshift(
    function (sData) {
        if (sData !== null && sData.match('^<.*[0-9]+</.*>
上面的代码将找到包含在 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));
    };

这会剥离标签并按数值排序。
只需在设置表之前将所有这些代码放入脚本标记中，它就应该可以工作！
)) {
            return 'intComparer';
        }
        return null;
    }
);

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

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

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

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

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

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