CodeIgniter dan jQuery-Datatables

Pada posting kali ini saya ingin membahas mengenai penggunaan plugin jQuery-Datatables yang diimplementasikan dengan framework CodeIgniter (PHP).

Mengutip dari situs resminya :

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table

Jadi, dengan menggunakan plugin jQuery-datatable, table HTML dapat memiliki kontrol interaksi yang menarik, antara lain : pagination, on-the-fly search, dan on-the-fly sorting. Dengan demikian, kita hanya perlu memodifikasi layer model (query database) dan tidak perlu memusingkan pembuatan kontrol (pagination, search, sorting) dari suatu tabel.

Pada posting ini akan mencoba untuk menampilkan table yang diimplementasikan dengan jQuery-Datatables, dan hasil akhirnya kurang lebih tampak seperti pada gambar berikut :

User table

Dari gambar tersebut, kita bisa lihat bahwa tabel HTML memiliki kontrol berupa pagination, searching, dan column-sorting. Semua kontrol tersebut otomatis di-handle oleh plugin jQuery-datatables.

Adapun langkah-langkah implementasinya yaitu sebagai berikut :

  • Download jQuery & datatables.
    Sebagai referensi, versi yang digunakan pada contoh di artikel ini yaitu CodeIgniter v2.0.3, jQuery v1.6.2, dan datatables v1.9.1.
  • Database preparation
    Seperti yang tampak pada gambar tabel di atas, kita akan membuat user-listing, struktur tabel sederhananya yaitu seperti di bawah ini :

    
CREATE TABLE `user` (
`id` varchar(255) NOT NULL,
`username` varchar(255) default NULL,
`password` varchar(255) default NULL,
`firstName` varchar(255) default NULL,
`lastName` varchar(255) default NULL,
PRIMARY KEY  (`id`)
)
  • Create Controller
    Di dalam controller dibuat 2 buah function, function yang pertama untuk menampilkan halaman table (function display_page()), dan function yang kedua untuk mengeluarkan output data berupa JSON (function user_listing()).

    <?php
// user.php (controller)
if (!defined('BASEPATH'))
	exit('No direct script access allowed');

class User extends CI_Controller {
	function display_page() {
		// views
		$this->load->view('user_listing');
	}
}

    Function display_page() di atas hanya akan me-load view ‘user_listing.php’. ‘user_listing.php’ sendiri akan berisi kode HTML untuk ditampilkan ke end-user yang didalamnya terdapat pemanggilan library jQuery-datatables seperti yang ditunjukkan pada kode berikut :

    <html>
<head>
<!-- load all jQuery-Datatables library -->

<script src="<?= base_url() ?>" type="text/javascript">js/datatables/jquery.dataTables.js"></script>
<script src="<?= base_url() ?>" type="text/javascript">js/datatables/dataTables.listboxPagination.js"></script>
<script src="<?= base_url() ?>" type="text/javascript">js/datatables/dataTables.pipelining.js"></script>

<!-- instantiate dataTable -->

<script type="text/javascript">
    $(document).ready(function() {
        var oTable = $('#usertable').dataTable( {
            "oLanguage": {
                "sLengthMenu": " Show _MENU_ "
            },
            "bProcessing": true,
            "bServerSide": true,
            "sPaginationType": "listbox",
            "aLengthMenu": [[5, 10, 20, 30, 40, 50, 100], [5, 10, 20, 30, 40, 50, 100]],
            "bStateSave": true,
            "bAutoWidth": false,

            // call function user_listing in 'user' controller
            "sAjaxSource": "user/user_listing",
            "aoColumns": [
                { "bSortable": false, "sWidth": "20px"},
                null,
                null,
                null,
                null,
                { "sClass": "center", "bSortable": false }
            ],
            "fnServerData": fnDataTablesPipeline,
        } );

        $('#check_all').click( function() {
            $('.rox', oTable.fnGetNodes()).attr('checked',this.checked);
        } );

    } );
</script>
<head>
<body>
    <table id="usertable" class="tablelist">
        <thead>
            <tr>
                <th>No</th>
                <th>Username</th>
                <th>Name</th>
                <th>Email</th>
                <th>Active</th>
                <th style="text-align: center;" width="20"><input id="check_all" name="check" type="checkbox" /></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td align="center"></td>
                <td align="center"></td>
                <td align="center"></td>
                <td align="center"></td>
                <td align="center"></td>
                </tr>
        </tbody>
    </table>

    Pada kode program di atas, terdapat bagian-bagian seperti berikut :

    • Baris 5-7 : load library jquery-datatables (jquery.dataTables.js) dan plugin tambahan untuk listbox-pagination
    • Baris 11-42 : inisialisasi plugin dengan men-set beberapa parameter inisialisasi seperti : bServerSide (memproses kontrol tabel di sisi server), sPaginationType (dalam hal ini dipilih listbox), sAjaxSource (untuk memanggil controller sebagai sumber data (JSON), dalam hal ini yaitu function user_listing di controller User), aLengthMenu untuk mengatur kontrol jumlah row yang ingin ditampilkan, serta aoColumns untuk mengatur karakteristik tiap kolom dalam tabel.
    • Baris 47-68 : format dasar tabel yang diperlukan oleh plugin jQuery-Datatable. Perlu diingat bahwa tabel yang akan diformat dengan datatable harus memiliki elemen <thead> dan <tbody>. Tabel ini juga harus memiliki identifier, dan di dalam contoh ini kita set menggunakan id usertable. Identifier tersebut digunakan saat meng-instantiasi plugin datatables (lihat baris 13).

    Selanjutnya yaitu pembuatan function user_listing() yang diletakkan di controller User, sebagaimana yang kita set dalam parameter inisialisasi sAjaxSource. Kode programnya sebagai berikut :

    function user_listing() {
	// variable initialization
	$search = "";
	$start = 0;
	$rows = 10;

	// get search value (if any)
	if (isset($_GET['sSearch']) && $_GET['sSearch'] != "" ) {
		$search = $_GET['sSearch'];
	}

	// limit
	$start = $this->get_start();
	$rows = $this->get_rows();

	// sort
	$sort_dir = $this->get_sort_dir();

	// run query to get user listing
	$user_listing = $this->user_model->user_listing($start, $rows, $search, $this->get_sort(), $sort_dir);
	$iFilteredTotal = $user_listing->num_rows();

	$iTotal = $this->user_model->user_listing(0, '-1', '', '', '')->num_rows();

        /*
         * Output
         */
         $output = array(
             "sEcho" => intval($_GET['sEcho']),
             "iTotalRecords" => $iTotal,
             "iTotalDisplayRecords" => $iFilteredTotal,
             "aaData" => array()
         );

        // get result after running query and put it in array
        foreach ($user_listing->result() as $row) {
		$record = array();

		$record[] = $row->id;
		$record[] = $row->username;
		$record[] = $row->firstName . ' ' . $row->lastName;
		$record[] = $row->email1;
		$record[] = $row->active;
		$record[] = $row->id;

		$output['aaData'][] = $record;
	}
	// format it to JSON, this output will be displayed in datatable
	echo json_encode($output);
}

function get_start() {
	$start = 0;
	if (isset($_GET['iDisplayStart'])) {
		$start = intval($_GET['iDisplayStart']);

		if ($start < 0)
			$start = 0;
	}

	return $start;
}

function get_rows() {
	$rows = 10;
	if (isset($_GET['iDisplayLength'])) {
		$rows = intval($_GET['iDisplayLength']);
		if ($rows < 5 || $rows > 500) {
			$rows = 10;
		}
	}

	return $rows;
}

function get_sort_dir() {
	$sort_dir = "ASC";
	$sdir = strip_tags($_GET['sSortDir_0']);
	if (isset($sdir)) {
		if ($sdir != "asc" ) {
			$sort_dir = "DESC";
		}
	}

	return $sort_dir;
}

function get_sort() {
	$sCol = $_GET['iSortCol_0'];
	$col = 0;
	$cols = array( "username", "username", "firstName", "email1", "active" );

	if (isset($sCol)) {
		$col = intval($sCol);
		if ($col < 0 || $col > 4)
			$col = 0;
	}
	$colName = $cols[$col];

	return $colName;
}

    Dari kode program di atas, kita dapat lihat beberapa parameter yang ‘dikirim’ oleh Datatables, antara lain : sSearch (parameter pencarian), iDisplayStart (index awal record table), iDisplayLength (jumlah record yang ingin ditampilkan), sSortDir_0 (sort-direction – ascending/descending), dan iSortCol_0 (index kolom yang di-sorting).

    :)

dalam controller