CODEWITHSUNDEEP
jquerycodeigniterdatatables
under5hell
under5hell

Reputation: 997

how to create serverside datatable with codeigniter and datatables Jquery plugin

I'm using Codeigniter with dataTables Jquery plugin.

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 bottom of the table. 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. :-)

Upvotes: 0

Views: 14295

Answers (1)

SilentAssassin
SilentAssassin

Reputation: 466

Rather refer to this code. I made my datatables using it and it works nicely. If you have issues with it then let me know.

Upvotes: 4

Related Questions