Javascript 无法在html中包含jquery.dataTables.min.js_Javascript_Jquery_Html_Datatables

Javascript 无法在html中包含jquery.dataTables.min.js

javascript jquery html datatables

Javascript 无法在html中包含jquery.dataTables.min.js,javascript,jquery,html,datatables,Javascript,Jquery,Html,Datatables,我的代码： <!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"></

我的代码：

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

我无法在我的html页面中包含此插件

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

我在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)

由于此错误，我无法在HTML页面中包含分页。它起作用了。现在我还想将分页添加到我的HTML页面中

实际上，在下面的代码中，如果我包含一个警报框，那么在单击警报框的OK按钮后，分页将包含在HTML页面中。如果我在下面的代码中没有包含任何警告框，则由于上述错误，我无法包含分页

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

有人能帮我解决这个问题吗

解决方案

在完成对元素的操作和添加行之后，即在调用制表之后，需要初始化表

我还将把代码放入ready事件的处理程序中，因为您正在访问和操作DOM节点

演示

有关代码和演示，请参见。

有人能帮我解决这个问题吗？我想听听你的建议。

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

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