Datatables IP-address sorting "full example"

Datatables IP-address sorting "full example"

hazemshoeibhazemshoeib Posts: 2Questions: 0Answers: 0

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:

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

can someone fix the below code please?

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

Replies

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    You were close, you missed out the columnDefs entry to say that column is an IP address - see example here :

         columnDefs: [
           { type: 'ip-address', targets: 4 }
         ]
    

    Colin

  • hazemshoeibhazemshoeib Posts: 2Questions: 0Answers: 0

    WOW!!
    Thank you so much, Colin.. you made my day! :)

Sign In or Register to comment.