Datatables IP-address sorting "full example"-CodePudding

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

$(document).ready(function () {
    var result = [{
            slno: 1,
            Name: "row1",
            ipAddr: "0.29.0.36"
        },
        {
            slno: 2,
            Name: "row2",
            ipAddr: "172.29.0.78"
        },
        {
            slno: 3,
            Name: "row3",
            ipAddr: "172.29.0.98"
        },
        {
            slno: 4,
            Name: "row4",
            ipAddr: "172.29.0.47"
        },
        {
            slno: 5,
            Name: "row5",
            ipAddr: "172.29.0.56"
        },
        {
            slno: 6,
            Name: "row6",
            ipAddr: "172.29.0.131"
        },
        {
            slno: 7,
            Name: "row7",
            ipAddr: "172.29.0.223"
        },
        {
            slno: 8,
            Name: "row8",
            ipAddr: "172.29.0.20"
        },
        {
            slno: 9,
            Name: "row9",
            ipAddr: "172.29.0.13"
        },
        {
            slno: 10,
            Name: "row10",
            ipAddr: "172.29.0.113"
        }
    ]

    $('#example').dataTable({
        "aoColumns": [{
                "mDataProp": "Name",
                "title": "Name",
                "width": "30%"
            },
            {
                "mDataProp": "ipAddr",
                "title": "ipAddr",
                "width": "40%",
                "sType": "ip-address"
            },
            {
                "mDataProp": "slno",
                "width": "30%",
                "title": "SLNO"
            }
        ],
        "aaData": result,
        "paginate": false,
        "info": false,
        "bFilter": false,
        "autoWidth": false,
        "order": [[ 1, "asc" ]]
    });
});

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.11.3/type-detection/ip-address.js"></script>    
</head>

<body>
    <div >
        <div >
            <table id="example"  style="width:100%">
            </table>
        </div>
    </div>
</body>
</html>

References