JQuery Datatable 插件在 CodeIgniter 3.x 中无法正常工作答案

【问题标题】：JQuery Datatable plugin doesn't work correctly in CodeIgniter 3.xJQuery Datatable 插件在 CodeIgniter 3.x 中无法正常工作
【发布时间】：2017-07-18 07:25:18
【问题描述】：

这是我第一次在这里发帖。

请原谅我对编程的一点了解。我对 PHP 还很陌生，只有 3 周的练习。我一直在使用 Netbeans 开发一个简单的 CodeIgniter 3.x 项目，大约在同一时间我正在练习 PHP。我想使用来自here 的 JQuery Datatable 插件输出一个简单的数据表。我想我已经正确地遵循了简单的“你的第一个数据表”示例。虽然我不明白为什么我的代码不起作用。

这是我的 index.php，它是视图：

<html>
    <head>
        <title>
            Employee Database
        </title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/datatable-bootstrap.min.css" media="screen">                  
        <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>js/datatable.jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
        <script src="<?php echo base_url(); ?>js/index.js"></script>
    </head>
    <body>
        <header>
            <center>
                <h1>
                    Employee DB
                </h1>
            </center>
        </header>
    <center>    
        <table class="table table-bordered">
            <thead>
            <tr>               
                <th>
                    Employee Code
                </th>
                <th>
                    Employee Description
                </th>
                <th>
                    Employment Date
                </th>
                <th>
                    Dept. Code
                </th>
                <th>
                    Dept. Description
                </th>
            </tr>
            </thead>
            <?php foreach ($results as $results_item): ?>        
            <tbody>
            <tr>  
                <td>
                   <?php echo $results_item['empcode']; ?>
                </td>
                <td>
                   <?php echo $results_item['empdesc']; ?>
                </td>
                <td>
                    <?php echo $results_item['empdate']; ?>
                </td>
                <td>
                    <?php echo $results_item['deptcode']; ?>
                </td>
                <td>
                    <?php echo $results_item['deptdesc']; ?>
                </td>
            </tr>
            </tbody>
            <?php endforeach; ?>
        </table>
        <div id="paging-first-datatable"></div>
            <!--<?php //var_dump($results);?>-->
        </center>
    </body>    
</html>

这是我的 index.js：

$('#first-datatable-output table').datatable({
    pageSize: 10,
    sort: [true, true, true, true, true],
    filters: [true, true, true, true, true],
    filterText: 'What do you wish to find?'
});

它似乎不起作用。我得到的唯一输出只是一张没有分页的完整表格。我 console.log 在我的 index.js javascript 上，检查我是否已正确链接它们，使用简单的 hello world 并且消息确实按预期在控制台上输出，style.css 似乎也可以工作。

非常感谢任何解决方案、响应和见解！

谢谢！！！

好的，从我得到的回复中，我终于设法让它工作了！！

我现在唯一的问题是修复分页按钮

它们看起来像这样：Pagination

知道如何修饰它吗？

【问题讨论】：

您是否收到与数据表插件相关的任何错误？
你的html代码中的id="first-datatable-output"在哪里？
我没有收到与控制台上的插件相关的任何错误。至于 id，我只按照链接上显示的示例进行操作，所以我不确定将其放置在哪里。虽然我会尝试在表格周围放置一个 id 为 first-datatable-output 的 div 标签，看看是否能解决它
你可以给你的表一个id，使用id选择器可以初始化数据表
我尝试将表的 id 更改为 id="test" 并将 js 文件上的 id 引用更改为 $(#test) 但数据表似乎仍然无法正常工作。

标签： javascript php jquery codeigniter datatable

【解决方案1】：

您的 foreach 循环中有表格主体标签，它将为您拥有的每个结果输出标签。您需要将它们放在 foreach 之外。改变这个：

<?php foreach ($results as $results_item): ?>        
    <tbody>
        <tr>  
            <td>
               <?php echo $results_item['empcode']; ?>
            </td>
            <td>
               <?php echo $results_item['empdesc']; ?>
            </td>
            <td>
                <?php echo $results_item['empdate']; ?>
            </td>
            <td>
                <?php echo $results_item['deptcode']; ?>
            </td>
            <td>
                <?php echo $results_item['deptdesc']; ?>
            </td>
        </tr>
    </tbody>
<?php endforeach; ?>

进入这个：

<tbody>
    <?php foreach ($results as $results_item): ?>        
        <tr>  
            <td>
               <?php echo $results_item['empcode']; ?>
            </td>
            <td>
               <?php echo $results_item['empdesc']; ?>
            </td>
            <td>
                <?php echo $results_item['empdate']; ?>
            </td>
            <td>
                <?php echo $results_item['deptcode']; ?>
            </td>
            <td>
                <?php echo $results_item['deptdesc']; ?>
            </td>
        </tr>
    <?php endforeach; ?>
</tbody>

文档说明标签非常重要。试试这个，让我知道！

阅读文档时，您也可以直接使用 JS。可以试试吗？

为你的 index.js 试试这个：

var datatable = new DataTable(document.querySelector('#first-datatable-output table'), {
    pageSize: 10,
    sort: [true, true, true, true, true],
    filters: [true, true, true, true, true],
    filterText: 'What do you wish to find?'
});

我检查了文档的源代码。他们将表格放入 id 为 first-datatable-output 的 div 中......他们没有在任何地方记录。你可以试着把这个<div id="first-datatable-output">放在<table class="table table-bordered">之前和</div>之后<div id="paging-first-datatable"></div>

对于分页，请尝试将class="pagination-datatables text-center" 添加到<div id="paging-first-datatable">，例如<div id="paging-first-datatable" class="pagination-datatables text-center">。

天啊...他们的文档是 baaaaaaaaaad！

【讨论】：

感谢指正！数据确实出现在表格上，但现在唯一缺少的是搜索框和分页，它们应该是插件的一部分。
已更正...抱歉，我读得不够远。也许先尝试JS实现？告诉我。
好的，所以我尝试了 js，令我惊讶的是控制台上出现了一堆错误。 Uncaught TypeError: Cannot read property 'tHead' of null at new DataTable (datatable.js:28) at index.js:1
您可以尝试将id="first-datatable-output" 添加到<table class="table table-bordered"> 吗？喜欢<table class="table table-bordered" id="first-datatable-output"> 也可以查看我的上一次编辑。他们用正确的 ID 将 tavble 包装在一个未记录的 div 中......
代码有效！页面里面显示了大约10条数据，但是没有分页的迹象.....