JQuery Datatable plugin doesn't work correctly in 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. I've just been working on a simple CodeIgniter 3.x project using Netbeans, for around the same time I'm practicing PHP. I'd like to output a simple datatable using the JQuery Datatable plugin from here . 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:
<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:
$('#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.
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?
1 answers
solution1
0 ACCPTED 2017-07-18 07:32:35
You have the table body tags IN your foreach loop, which will output the tags for each result you have. You need to place them outside of your 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. Maybe try that?
Try this for your 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. 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>
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"> .
Holy... their documentation is baaaaaaaaad!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.