DataTables入门 [英] Getting Started with DataTables

查看:94
本文介绍了DataTables入门的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在网站表单上实现DataTables。我遇到了一些困难,所以我退后一步,试图在非常基础的表上实现DataTable。我使用的表格直接来自 http://www.datatables.net/usage/ 。然后我打电话给我认为需要的文件,但我仍然无法使Datatables工作在这个基本的表格上。我错过了什么?这里是练习代码:

I'm trying to get DataTables implemented on website form. I was experiencing some difficulties with that so I took a step back and tried to implement DataTables on a very basic table. The table I used came straight off of http://www.datatables.net/usage/. I then called in files I thought were needed but I'm still failing to get Datatables to work on even this basic of a table. What am I missing? Here's the "practice" code:

 <script type="text/javascript" charset="utf-8" src="/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/media/js/jquery.dataTables.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="/media/src/DataTables.js"></script>-->

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $('#table').dataTable();
    } );
    </script> 
    <style type="text/css" title="currentStyle">
        @import "/media/css/jquery.dataTables.css";
    </style>
    <title>Untitled Document</title>

</head>


    <table id="table" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<body>
</body>
</html>

谢谢!

Thanks!

推荐答案

js和css文件是否真的被加载?您可以使用firefox或者webkit浏览器中的开发工具调试firebug。 (只需右键单击表格并选择Inspect Element)

Are the js and css files actually being loaded? You can debug that with firebug on firefox or in development tools in webkit browser. (just right click in the table and select "Inspect Element")

另外,DataTables 可在Microsoft Ajax CDN上使用。与j相同查询

Also, DataTables is available on the Microsoft Ajax CDN. Same as jQuery

您可以尝试使用外部链接并查看它是否有效。像这样:

You can try to use the external link and see if it works. like this:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

另外请注意,使用外部库是一种很好的做法。

Also note that using external libraries is a good practice.

这篇关于DataTables入门的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆