使用 IP 地址和超链接对数据表进行排序

Sorting datatables with IP-Adresses and hyperlinks

本文关键字：数据表 排序 超链接 IP 地址 使用      更新时间：2023-09-26

我的数据表表现得很酷，直到我将特定列的整数元素（带有超链接）修改为 IP 地址。突然之间，排序功能变得奇怪了。

在我有这样的事情之前： 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript" src="includes/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8"> 
jQuery.fn.dataTableExt.oSort['intComparer-asc'] = function (a, b) {
  var m = a.match(/^'<.*'>('d+)'<.*'>/);
  a = m[1];
  var m = b.match(/^'<.*'>('d+)'<.*'>/);
  b = m[1];
  var value1 = parseInt(a);
  var value2 = parseInt(b);
  return ((value1 < value2) ? -1 : ((value1 > value2) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['intComparer-desc'] = function (a, b) {
  var m = a.match(/^'<.*'>('d+)'<.*'>/);
  a = m[1];
  var m = b.match(/^'<.*'>('d+)'<.*'>/);
  b = m[1];
  var value1 = parseInt(a);
  var value2 = parseInt(b);
  return ((value1 < value2) ? 1 : ((value1 > value2) ? -1 : 0));
};
$(document).ready(function() {
        $('#tableAsI').dataTable({
            'aoColumnDefs': [
                { 'sType': 'intComparer', 'aTargets': [ 0, 1 ] }
            ]
        });
    }); 
</script>

<table class="table" id="tableAsI">
<thead> <tr class="infoo"> <th>N</th> <th>IP</th> </tr> </thead>
  <tbody>
    <?php
    echo '<tr><td>2</td>';
    echo '<td ><a href="index2.php" title="2">13</a></td>';
    echo'</tr>';
    echo '<tr> <td>4</td>';
    echo '<td ><a href="index4.php" title="4">1</a></td>';
    echo'</tr>';
    echo '<tr><td>1</td>';
    echo '<td ><a href="index1.php" title="1">2</a></td>';
    echo'</tr>';
    echo '<tr><td>3</td>';
    echo '<td ><a href="index3.php" title="3">20</a></td>';
    echo'</tr>';
    ?>
  </tbody>
</table>

排序效果很好，但是在添加IP地址后，我就有了这个，例如： 

<td ><a href="index3.php" title="3">100.130.6.109</a></td>

结果是： 

100.130.6.109
**100.130.6.11**
100.130.6.110
100.130.6.111

我想要的是这个： 

**100.130.6.11**
100.130.6.109
100.130.6.110
100.130.6.111

谢谢。

如何使用这个插件（或者在额外链接支持的情况下使用它的代码）？ https://datatables.net/plug-ins/sorting/ip-address

该插件使用的代码如下：

var m = a.split("."), x = "";

但是，由于您还有超链接，因此在jQuery的帮助下，您可以轻松解析和提取链接的内容。例如：

$('<a href="index3.php" title="3">100.130.6.109</a>').html();

这将准确地为您提供100.130.6.109。因此，对插件代码的小修改如下所示：

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "ip-address-pre": function(a) {
        var ip_address = $(a).html();
        var m = ip_address.split("."), x = "";
...
相关文章：