如何以數字方式對DataTable中的超鏈接進行排序？

我有以下超鏈接網格視圖列需要由IncidentId數值排序。有沒有辦法將數據保存爲超鏈接，只能通過IncidentId進行排序？當我使用下面的JavaScript函數對它進行「數字」排序時，它會中斷並且列不會排序。如果我將sType聲明爲「string」或「html」，它會進行排序，但它將數據字母化而不是數字排序，換句話說，它會將其列爲93,82,71,40,123,122,121，而不是123,122,121,93,82,71,40。如何以數字方式對DataTable中的超鏈接進行排序？

<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>

來源

2012-02-20 Chaser09

使用插件，也許：http://datatables.net/plug-ins/sorting – Blazemonger 2012-02-20 15:48:30

在Google上也發現了這個：http://datatables.net/forums/discussion/367/bug-sort-number-column -and-stype/p1 – Blazemonger 2012-02-20 15:49:10

我會看看論壇的討論。感謝這些鏈接。 – Chaser09 2012-02-20 16:23:32

您需要覆蓋datatables sort函數的默認比較器。

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

這通過數值去掉標籤並排序。

只需將所有代碼放入腳本標記中，然後再設置表格即可使用！

來源

2012-02-20 15:53:28 Roland

getInnerHTML未定義 – 2013-12-17 18:59:20

我的解決辦法是，先定義一個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爲更多細節。（免責聲明：這是我的博客）。

來源

2014-03-27 18:39:24

如何以數字方式對DataTable中的超鏈接進行排序？

回答

相關問題