Unable to include jquery.dataTables.min.js in html

My Code :

<!DOCTYPE html>
<meta charset='utf-8'>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>
        <link rel='stylesheet' href='style.css'>
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
        <script>
            $(document).ready(function() {
                alert("Hello");
                $("#ip").val('');
                $('#example').DataTable({
                    "pagingType": "full_numbers"
                });
            });
        </script>
    </head>

    <body>
        <div>
            <form action="/home/divya/html_docs/click.html" method="post" id="form1">Client_ip :
                <input type="text" id="ip" name="client_ip" style="width: 600px;" />
                <div id="subDiv">
                    <button type="submit" form="form1" value="Submit">Submit</button>
                </div>
            </div>
            </br>
            <table id="example" class="display" cellspacing="0" width="100%"></table>
            <script>
                var tabulate = function(data, columns) {
                var svg = d3.select('#ip').append("svg")
                var table = d3.select('#example')
                var thead = table.append('thead')
                var tbody = table.append('tbody')

                thead.append('tr')
                    .selectAll('th')
                    .data(columns)
                    .enter()
                    .append('th')
                    .text(function(d) {
                    return d
                })

                var rows = tbody.selectAll('tr')
                    .data(data)
                    .enter()
                    .append('tr')

                var cells = rows.selectAll('td')
                    .data(function(row) {
                    return columns.map(function(column) {
                        return {
                            column: column,
                            value: row[column]
                        }
                    })
                })
                    .enter()
                    .append('td')
                    .text(function(d) {
                        return d.value
                    })
                    .append("input")
                    .attr("id", "change")
                    .attr("type", "checkbox")
                    .style("float", "left")
                    .on("click", function(d, i) {
                        var csv = $(':checkbox[id=change]:checked').map(function() {
                            return $(this).parent().text();
                        }).get().join(',');

                    $('#ip').val(csv);
                });

                return table;
            }

            d3.csv('some1.csv', function(data) {
                var columns = ['client_ip']
                tabulate(data, columns)
            });
        </script>
    </body>
</html>

I'm unable to include this plugin in my html page.

<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

I'm facing the following error in firebug,

TypeError: e[j] is undefined

...post);for(a=0;a<n.length;a++){j=n[a][0];f=e[j].aDataSort;b=0;for(c=f.length;b<c;...

    jquery.....min.js (line 64, col 203)

Due to this error I'm unable to include pagination in my HTML page. It works like this. Now I want to also add pagination into my HTML page.

Actually in the below code, if I include an alert box the pagination is included into an HTML page after clicking the OK button of the alert box. If I did not include any alert box in the below code, I'm unable to include the pagination due to above error.

<script>
    $(document).ready(function() {
        alert("Hello");
        $("#ip").val('');
        $('#example').DataTable({
            "pagingType": "full_numbers"
        });
    });
</script>

Can anyone please help me out regarding this issue?

SOLUTION

You need to initialize your table once you are finished manipulating the <table> element and adding rows, i.e. after call to tabulate().

d3.csv('getcsv', function(data) {
   var columns = ['client_ip']
   tabulate(data, columns)

   $('#example').DataTable({
     "pagingType": "full_numbers"
   });
});

I would also put the code into handler for ready event, since you're accessing and manipulating DOM nodes.