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

时间:2015-03-16 10:22:36

标签: javascript jquery datatables

我的数据表很酷,直到我将特定列的整数元素(带有超链接)修改为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

感谢。

1 个答案:

答案 0 :(得分:0)

如何使用此插件(或者在额外链接支持的情况下使用它的代码)? 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 = "";
...