Search code examples
javascripthtmldatatablesip-addresscolumnsorting

Datatables IP-address sorting "full example"

I am very new to html/javascript and I am struggling to have this fixed, would you please help!! I am trying to use DataTables jQuery plugin for sorting an IP-address column. I found followed many resources and but I couldn't full apply them as there is no full solution provided. I don't have a clue on how to define this column with the correct type to connect the puzzle pieces! :

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

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

can someone fix the below code?

<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>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>172.29.0.78</td>
                <td>$170,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>$86,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>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>172.29.0.56</td>
                <td>$162,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>$372,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>$137,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>$327,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>$205,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>$103,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>
Solution

  • In your example in the question, the column containing the IP addresses is the 5th column (so its index is 4 - column 1 has an index of zero).

    That is the value you need to use in the targets option: you are targeting column index 4 to use the ip-address custom data type.

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

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

} );
</script>

    You were very close with your fragment: { type: 'ip-address', targets: 0 } - just change 0 to 4.

    I recommend you put the DataTable script at the end of the page - immediately before the closing </body> tag.

    Here is a runnable demo - click on the triangles in the IP Address column to see the plugin being used:

    $(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>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>172.29.0.78</td>
                <td>$170,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>$86,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>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>172.29.0.56</td>
                <td>$162,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>$372,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>$137,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>$327,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>$205,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>$103,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>