Question

我最近将此工作用于我正在处理的另一个应用程序，并认为我将其应用于现有项目，但它不适用于第二件事。我觉得我错过了一些js文件或其他东西，但我已经尝试了所有我能找到的东西。我试图让它在一个简单的页面测试上工作，它似乎显示了CSS，但不是搜索或过滤。

这是我的页面：

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
<script type="text/javascript" language="javascript" src='https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">

<script>
    $(document).ready(function(){
        $('#myTable').DataTable( {

        } );
    });
</script>

<table id="myTable" class="display table" width="80%">
    <tr>
        <th>stuff</th><th>things</th><th>hi</th>
    </tr>
    <tr>
        <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
    </tr>
    <tr>
        <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
    </tr>
    <tr>
        <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
    </tr>
</table>

有什么想法吗？

Answer 1

Datatables网站在使用页面中指出您需要thead和tbody标签来初始化

<table id="myTable" class="display table" width="80%">
       <thead> <tr>
            <th>stuff</th><th>things</th><th>hi</th>
        </tr>
       </thead>
       <tbody>
        <tr>
            <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
        </tr>
        <tr>
        <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
    </tr>
    <tr>
        <td>gofgdjk</td><td>sdf</td><td>tedsdf</td>
    </tr>
   </tbody>
</table>

数据表 - 没有搜索或过滤功能

1 个答案: