I have about 3000 rows of record to be displayed in a table (i'm using postgresql). But i don't want the entire records to be loaded in the first time (it will slow the page load down). Instead. I prefer to make it separated into several pages and load it according to user action when user hit the next button. I have struggle with some code I made, but it still display an entire records with "Showing 1 to NaN of NaN entries (filtered from NaN total entries)" at the botom of the table.
This is my code.
The Controller:
The Model:
The View:
Any advice guys? I really appreciate your help. :-)
This is my code.
The Controller:
<?php
class Testdata extends CI_Controller
{
function __consrtuct()
{
parent::__consrtuct();
}
function index()
{
$this->load->view('vtestdata');
}
function getData()
{
$this->load->model('mtestdata');
$result = $this->mtestdata->getDatax();
echo json_encode($result);
}
}
The Model:
<?php
class Mtestdata extends CI_Model
{
function __construct()
{
parent::__construct();
}
function getDatax()
{
//output
$output = array(
"aData" => array()
);
$this->db->select('nik, user_name');
$query=$this->db->get('t_mtr_user');
$output["aData"] = $query->result();
return $output;
}
}
The View:
<head>
<script type="text/javascript" src="<?php echo base_url();?>/assets/media/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/jqueryUI/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$('#testTable').dataTable({
"bJQueryUI": true, //UI
"sAjaxSource": "<?=base_url();?>index.php/testdata/getData", //datasource
"sAjaxDataProp": "aData", //menentukan array/json dibaca dari mana
"bServerSide": true, //serverside , ini yg bermasalah, kalo di delete beres gak ada error, tapi gak SSP
"bProcessing": true,
"aoColumns":[ //tentukan kolom pd tabel dan value nya
{"mDataProp": "nik", "sTitle": "NIK"},
{"mDataProp": "user_name", "sTitle": "Username"}
]
});
});
</script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/jqueryUI/css/custom-theme/jquery-ui-1.8.20.custom.css">
</head>
<body>
<div>
<h1>test</h1>
<table id="testTable">
<thead>
<!--
<tr>
<th>nik</th>
<th>User name</th>
</tr>
-->
</thead>
<tbody>
<!--
<td></td>
<td></td>
-->
</tbody>
</table>
</div>
</body>
Any advice guys? I really appreciate your help. :-)