无法使用javascript使用datatables.net

时间:2014-08-18 06:51:02

标签: javascript html5 datatables

我一直在尝试使用http://datatables.net/

中的数据表

试图让它与javascript一起使用。但它对我不起作用。 即使使用侧面提供的示例,它仍然可以工作,只是一个空白页面。任何人都知道如何让它工作?

    <script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

    <script>
        var dataSet = [
    ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
    ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
    ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
    ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
    ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
    ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
    ['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
    ['Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'],
    ['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
    ['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
    ['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
    ['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
    ['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', 1, 'A'],
    ['Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', 1.1, 'A'],
    ['Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', 1.2, 'A'],
    ['Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', 1.3, 'A'],
    ['Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', 1.4, 'A'],
    ['Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', 1.5, 'A'],
    ['Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', 1.6, 'A'],
    ['Gecko', 'Mozilla 1.7', 'Win 98+ / OSX.1+', 1.7, 'A'],
    ['Gecko', 'Mozilla 1.8', 'Win 98+ / OSX.1+', 1.8, 'A'],
    ['Gecko', 'Seamonkey 1.1', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A'],
    ['Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A'],
    ['Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A'],
    ['Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A'],
    ['Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A'],
    ['Webkit', 'OmniWeb 5.5', 'OSX.4+', '420', 'A'],
    ['Webkit', 'iPod Touch / iPhone', 'iPod', '420.1', 'A'],
    ['Webkit', 'S60', 'S60', '413', 'A'],
    ['Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A'],
    ['Presto', 'Opera 7.5', 'Win 95+ / OSX.2+', '-', 'A'],
    ['Presto', 'Opera 8.0', 'Win 95+ / OSX.2+', '-', 'A'],
    ['Presto', 'Opera 8.5', 'Win 95+ / OSX.2+', '-', 'A'],
    ['Presto', 'Opera 9.0', 'Win 95+ / OSX.3+', '-', 'A'],
    ['Presto', 'Opera 9.2', 'Win 88+ / OSX.3+', '-', 'A'],
    ['Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A'],
    ['Presto', 'Opera for Wii', 'Wii', '-', 'A'],
    ['Presto', 'Nokia N800', 'N800', '-', 'A'],
    ['Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C/A<sup>1</sup>'],
    ['KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'],
    ['KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A'],
    ['KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A'],
    ['Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'],
    ['Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C'],
    ['Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C'],
    ['Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C'],
    ['Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A'],
    ['Misc', 'Dillo 0.8', 'Embedded devices', '-', 'X'],
    ['Misc', 'Links', 'Text only', '-', 'X'],
    ['Misc', 'Lynx', 'Text only', '-', 'X'],
    ['Misc', 'IE Mobile', 'Windows Mobile 6', '-', 'C'],
    ['Misc', 'PSP browser', 'PSP', '-', 'C'],
    ['Other browsers', 'All others', '-', '-', 'U']
        ];

        $(document).ready(function () {
            $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

            $('#example').dataTable({
                "data": dataSet,
                "columns": [
                    { "title": "Engine" },
                    { "title": "Browser" },
                    { "title": "Platform" },
                    { "title": "Version", "class": "center" },
                    { "title": "Grade", "class": "center" }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

一如既往,为你的时间而努力!,

1 个答案:

答案 0 :(得分:1)

更改脚本部分:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

享受;)