数据表 IP 地址排序 "full example"

Question

我是 html/javascript 的新手，我正在努力解决这个问题，请你帮忙！！我正在尝试使用 DataTables jQuery 插件对 IP-address 列进行排序。我发现了很多资源，但我无法完全应用它们，因为没有提供完整的解决方案。我不知道如何使用正确的类型定义此列以连接拼图！ :

"aoColumns": [
    null,
    { "sType": 'string-ip' },
    null
    ],

$('#example').dataTable( {
     columnDefs: [
       { type: 'ip-address', targets: 0 }
     ]
  } );

有人可以修复下面的代码吗？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create jquery databable easily</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/ip-address.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
            });
            });
        

    </script>

</head>
<body>
    <h2>Create jquery datatable easily</h2>
    
</body>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th id=name>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th id=ipaddress sType=string-ip>IP-Address</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>10.29.0.36</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>172.29.0.78</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>172.29.0.98</td>
                <td>,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>172.29.0.47</td>
                <td>3,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>172.29.0.56</td>
                <td>2,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>172.29.0.2</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>172.29.0.223</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>172.29.0.20</td>
                <td>7,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>172.29.0.13</td>
                <td>5,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>172.29.0.113</td>
                <td>3,600</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>IP-address</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</html>

Answer 1

在您的问题示例中，包含 IP 地址的列是第 5 列（因此其索引为 4 - 第 1 列的索引为零）。

这是您需要在 targets 选项中使用的值：您将列索引 4 定位为使用 ip-address 自定义数据类型。

<script>
$(document).ready(function() {

  $('#example').DataTable( {
    columnDefs: [
      { type: 'ip-address', targets: 4 }
    ]
  } );

} );
</script>

您的片段非常接近：{ type: 'ip-address', targets: 0 } - 只需将 0 更改为 4。

我建议您将 DataTable 脚本放在页面末尾 - 就在结束 </body> 标记之前。

这是一个可运行的演示 - 单击 IP 地址列中的三角形以查看正在使用的插件：

$(document).ready(function() {

  $('#example').DataTable( {
    columnDefs: [
      { type: 'ip-address', targets: 4 }
    ]
  } );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo Sort IP Addresses</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">

  <!-- the IP address sorting plug-in: -->
  <script src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/ip-address.js"></script>

  <!-- not required, just used for some extra table styling: -->
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th id=name>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th id=ipaddress sType=string-ip>IP-Address</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>10.29.0.36</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>172.29.0.78</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>172.29.0.98</td>
                <td>,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>172.29.0.47</td>
                <td>3,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>172.29.0.56</td>
                <td>2,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>172.29.0.2</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>172.29.0.223</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>172.29.0.20</td>
                <td>7,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>172.29.0.13</td>
                <td>5,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>172.29.0.113</td>
                <td>3,600</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>IP-address</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</html>

</div>

</body>
</html>

数据表 IP 地址排序 "full example"

Datatables IP-address sorting "full example"

html

javascript

ip-address

datatables

columnsorting