表格未按预期初始化

时间:2015-09-25 16:23:57

标签: javascript jquery datatables

我关注these steps

有这些进口

<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="/DataTables-1.10.9/media/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" src="/DataTables-1.10.9/media/js/jquery.js"></script>

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

<script type="text/javascript" language="javascript">
            $(document).ready(function() {
                alert("test1");
                $('#aval').DataTable( {
                    alert("test2");
                    "dom": '<"top"i>rt<"bottom"flp><"clear">'

                } );
            } );
</script>

它显示了test1,但没有显示test2我已经尝试了所有我知道的事情并且多次更改了代码并且没有任何作用

2 个答案:

答案 0 :(得分:1)

我认为你没有正确设置你的选择;根据这里的选项页面: DataTable Options

以下显示了

中的选项
DataTable({myOptions: values,});

下面您将看到示例:

$('#example'String).DataTable( {

    paging: false,

    scrollY: 400

} );

我认为您应该尝试使用没有选项或有限选项,如页面上的示例所示,看看是否有效,然后您可以修复格式。

修改

获取下面的代码片段并使用它们 - 如果有效,则在每次添加功能后添加您的附加代码。当它破裂时你会知道究竟是什么导致了这个问题。 附注 - 您确定网络服务器上存放库的路径吗?

这条路径必须存在 - 如果我的asp.net内存很好用,那么它来自web root。 HREF =&#34; /DataTables-1.10.9/

//数据表对象

<script type="text/javascript" language="javascript">
            $(document).ready(function() {
                $('#aval').DataTable() {

                } );
            } );
</script>​

// JQUERY对象

<script type="text/javascript" language="javascript">
            $(document).ready(function() {
                $('#aval').dataTable() {

                } );
            } );
</script>​

答案 1 :(得分:0)

我不完全确定您遇到的错误,但您只需要包含数据表脚本和CSS。最基本的初始化采用现有的HTML表格并将其转换为数据表格。&#34;

以下示例:

HTML

<table id="Table1">
<thead>
    <tr>
        <th>Col1</th>
        <th>Col2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Data!!</td>
        <td>Data 2 !!</td>
    </tr>
    <tr>
        <td>Data!!</td>
        <td>Data 2 !!</td>
    </tr>
    <tr>
        <td>Data!!</td>
        <td>Data 2 !!</td>
    </tr>
    <tr>
        <td>Data!!</td>
        <td>Data 2 !!</td>
    </tr>
</tbody>
</table>

Javascript (假设您已包含所有必需的脚本)

$("#Table1").DataTable();

Working JS Fiddle of the example.

修改

尝试切换脚本包括使用CDN版本而不是本地版本。

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>