+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: External Resources (https://forum.codeigniter.com/forumdisplay.php?fid=7)
+--- Forum: Addins (https://forum.codeigniter.com/forumdisplay.php?fid=13)
+--- Thread: Ignited Datatables - display the records on the table (/showthread.php?tid=63052)
Ignited Datatables - display the records on the table - Lykos22 - 09-21-2015
Hi I'd like some help please.
I'm using Ignited Datatables to display posts in tabular way in my view. I've been struggling hole weekend in order to do this working correct, but I can't understand what or if I'm doing something wrong.
This is the function that fetches the tabular data in my Post model
PHP Code:
/**
* Get page data on datatables
*/
public function get_datatable() {
$this->load->library('datatables');
$this->datatables->select('id, title, slug, date_published, status');
$this->datatables->from('posts');
return $this->datatables->generate();
}
Then in my posts controller I call the get_datatable()
PHP Code:
/**
* List all posts
*/
public function index() {
$this->data['datatables'] = true;
$this->data['data_url'] = 'admin/posts/index';
$this->data['posts'] = $this->post_model->get_datatable();
// load view
$this->load->view('admin/posts/index', $this->data);
}
And this is my view
Code:
<table class="table dataTable table-bordered" cellspacing="0" width="100%">
<thead> <!-- TODO - Display the headings: Title, Date Published, Url Slug -->
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody></tbody> <!-- TODO - Display the posts -->
</table>And this is my script
PHP Code:
<?php if(isset($datatables)): ?>
<script type="text/javascript" src="<?php echo base_url('js/dataTables/jquery.dataTables.min.js'); ?>">
<script type="text/javascript" src="<?php echo base_url('js/dataTables/dataTables.bootstrap.min.js'); ?>">
<script type="text/javascript">
$(document).ready(function() {
$('.dataTable').DataTable({
'bProcessing' : true,
'bServerSide' : true,
'sAjaxSource' : '<?php echo base_url($data_url); ?>',
'sServerMethod' : 'POST',
'fnServerData' : function (sSource, aoData, fnCallback) {
$.ajax({
dataType : 'json',
type : 'post',
url : sSource,
data : aoData,
success : fnCallback,
});
}
});
});
</script>
<?php endif; ?>Any help would be appreciated.
RE: Ignited Datatables - display the records on the table - salain - 09-21-2015
Hi,
You need to change your controller to this to work:
PHP Code:
public function index() {
$this->data['datatables'] = true;
$this->data['data_url'] = 'admin/get_post_datatables';
// load view
$this->load->view('admin/posts/index', $this->data);
}
Public function get_post_datatables(){
echo $this->post_model->get_datatable();
}
RE: Ignited Datatables - display the records on the table - Lykos22 - 09-22-2015
(09-21-2015, 10:38 PM)salain Wrote: Hi,
You need to change your controller to this to work:
PHP Code:public function index() {
$this->data['datatables'] = true;
$this->data['data_url'] = 'admin/get_post_datatables';
// load view
$this->load->view('admin/posts/index', $this->data);
}
Public function get_post_datatables(){
echo $this->post_model->get_datatable();
}
Thank you for your reply. I 've done some changes on my code so you can review it
PHP Code:
**
* List all posts
*/
public function index() {
$this->data['datatables'] = true;
$this->data['data_url'] = 'admin/posts/datatables_ajax';
// $this->data['posts'] = $this->post_model->get_datatable();
// dump($this->data['pages']);
// load view
$this->load->view('admin/pages/index', $this->data);
}
public function datatables_ajax() {
$this->output->enable_profiler(false);
$this->data['posts'] = $this->post_model->get_datatable();
// echo $this->data['posts'];
}
I've put it on a separate function, as you said before but still same thing
RE: Ignited Datatables - display the records on the table - Lykos22 - 09-23-2015
Ok I have managed to display records on the screen but the rest functionality of the datatables doesn't seem to work. I can get all records and not the first 10 by default, the pagination, the Search and the sorting (asc or desc) of each col is not working, and also showing more than 10 records.
This is my code updated
PHP Code:
// model
/**
* Get page data on datatables
*/
public function get_datatable() {
$this->load->library('datatables');
$this->datatables->select('id, title, slug, sort_description, status')
->from('posts');
return $this->datatables->generate();
}
// controller
/**
* List all cms-pages
*/
public function index() {
$this->data['datatables'] = true;
$this->data['data_url'] = 'admin/posts/data_ajax';
// load view
$this->load->view('admin/posts/index', $this->data);
}
public function data_ajax() {
$this->output->enable_profiler(false);
echo $this->post_model->get_datatable();
// echo json_encode($this->post_model->get_datatable());
exit();
}
// view
<table class="table dataTable table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Url Slug</th>
<th>Sort Description</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Title</th>
<th>Url Slug</th>
<th>Sort Description</th>
<th>Status</th>
</tr>
</tfoot>
<!-- <tbody>
<tr>
<td colspan="5" class="dataTables_empty"></td>
</tr>
</tbody> -->
</table>
<?php if(isset($datatables)): ?>
<?php echo js_tag('js/dataTables/jquery.dataTables.min.js'); ?>
<?php echo js_tag('js/dataTables/dataTables.bootstrap.min.js'); ?>
<script type="text/javascript">
$(document).ready(function() {
$('.dataTable').DataTable({
'serverSide': true,
'bProcessing' : true,
'bServerSide' : true,
'ordering': true,
'paging': true,
'searching': true,
'sAjaxSource' : '<?php echo base_url($data_url); ?>',
'sServerMethod' : 'POST',
'columns': [
{ 'data': 'id' },
{ 'data': 'title' },
{ 'data': 'slug' },
{ 'data': 'sort_description' },
{ 'data': 'status' }
],
'fnServerData' : function (sSource, aoData, fnCallback) {
$.ajax({
dataType : 'json',
type : 'post',
url : sSource,
data : aoData,
success : fnCallback,
});
}
});
});
</script>
<?php endif; ?>