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

Question

This'll be my first time posting here. 这是我第一次在这里发布。

Please forgive my little knowledge on programming. 请原谅我对编程的一点知识。 I'm fairly new to PHP with just 3 weeks of practice. 经过3个星期的练习，我对PHP还是很陌生。 I've just been working on a simple CodeIgniter 3.x project using Netbeans, for around the same time I'm practicing PHP. 我刚刚在使用Netbeans进行一个简单的CodeIgniter 3.x项目，而我正在练习PHP。 I'd like to output a simple datatable using the JQuery Datatable plugin from here . 我想从这里使用JQuery Datatable插件输出一个简单的数据表。 I think I've followed the simple 'Your first datatable' example posted there correctly. 我认为我已经正确地遵循了那里发布的简单“您的第一个数据表”示例。 Though I don't understand why my code won't work. 虽然我不明白为什么我的代码无法正常工作。

Here's my index.php, which is the view: 这是我的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>

here's my index.js: 这是我的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?' });

It doesn't seem to work. 它似乎不起作用。 The only output I get is just a full table with nothing paginated. 我得到的唯一输出就是没有分页的完整表。 I console.log on my index.js javascript, to check whether I've linked them correctly, with a simple hello world and the message does output on the console as expected, the style.css seems to work too. 我在index.js javascript上进行console.log，以检查是否已使用简单的hello world正确链接了它们，并且消息确实按预期在控制台上输出，style.css似乎也可以工作。

Any solution, response, and insight is deeply appreciated! 任何解决方案，响应和见解均深表感谢！

Thank you!!! 谢谢！！！

Okay so from the replies I got I finally managed to get it working!! 好吧，从我得到的答复中，我终于设法使它开始工作！

My only problem now is fixing the buttons for the pagination 我现在唯一的问题是固定分页按钮

They look something like this: Pagination 他们看起来像这样：分页

Any idea how to spruce it up? 知道如何修饰它吗？

Answer 1

You have the table body tags IN your foreach loop, which will output the tags for each result you have. 在foreach循环中有表格主体标签，该标签将为您的每个结果输出标签。 You need to place them outside of your foreach. 您需要将它们放置在foreach之外。 Change this: 更改此：

<?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; ?>

into this: 到这个：

<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>

The documentation states the tag is really important. 文档指出标签确实很重要。 Try this and let me know! 试试这个，让我知道！

When reading the documentation you could also use JS directly. 阅读文档时，您也可以直接使用JS。 Maybe try that? 也许尝试一下？

Try this for your index.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?'
});

I inspected the source code of the Documentation. 我检查了文档的源代码。 They put the table into a div with the id first-datatable-output ... They do not document that anywhere. 他们将表放入id为first-datatable-output的div中。 You could try to put this <div id="first-datatable-output"> BEFORE <table class="table table-bordered"> and a </div> AFTER <div id="paging-first-datatable"></div> 您可以尝试将<div id="first-datatable-output">放在<table class="table table-bordered"> ，将</div>放在<div id="paging-first-datatable"></div>

For the pagination, try adding class="pagination-datatables text-center" to the <div id="paging-first-datatable"> like <div id="paging-first-datatable" class="pagination-datatables text-center"> . 对于分页，请尝试将class="pagination-datatables text-center"到<div id="paging-first-datatable">例如<div id="paging-first-datatable" class="pagination-datatables text-center"> 。

Holy... their documentation is baaaaaaaaad! 真是的...他们的文件是baaaaaaaaad！

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-18 07:32:35

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-18 07:32:35

解决方案1
0 已采纳 2017-07-18 07:32:35