How to use jquery Data Table with Codeigniter
In this post, I will show how to integrate jquery datatable plugin. DataTables is a table enhancing plug-in to add sorting, pagination and filteration to plain HTML tables with a very less effort. Jquery datatables also support print, pdf export, csv export and other button tools.Jquery also support responsive features to grow and shrink dynamically as page resized or for different screen. Let see with an example.
1.Download jquery datatable plugin. After downloading put all folders and files in a separate directory called assets which contains all your js and css files of jquery datatable plugin.We will link all required js/css files using base_url. Here is directory structure.
2. Next create a view called user_list.php inside application/views directory where we gonna use jquery datatable.To show data Here we will get all users list and will show in table.
<html>
<head>
<title>User Report</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.min.css'); ?>" rel="stylesheet">
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;
}
</style>
<h3>Users Report</h3>
<table id="table" align="center" cellpadding = "5" border="2" class="table table-striped display nowrap table-bordered" cellspacing="0" width="100%" style="position:relative; top:7px;">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?phpforeach($users as $row) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->mobile; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#table').DataTable({
"ordering": false,
dom: 'lBfrtip',
buttons:[
'copy','pdf','print','csv'
],
});
});
</script>
<scriptsrc="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/pdfmake.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/vfs_fonts.js')?>"></script>
</body>
</html>
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!