Codeigniter Datatables Kullanımı Sakila DB Örnek Example

Merhaba Arkadaşlar  ,

Bu yazımda PHP Frameworklerinden CodeIgniter ile JS Datatables nasıl kullanacağımız hakkında bir örnek ile bilgi vereceğim.

Hiç bir kurulum gerektirmeden CodeIgniter Framework’ünü kullanabilirsiniz. Son sürümü indirmek için tıklayın. (localhost’unuzun dizinine kopyalayın.)

• GNU Lisansı olan Datatables kütüphanesini buradan indirin ve codeigniter’ın ana dizine kopyalayın. (applications/libraries)
• Örnek Database olarakta standart olan ‘sakila.db’ yi kullanacağım. buradan indirebilirsiniz. (sakila.sql)
• Son olarakda Datatables Javascript Kütüphanesini buradan indirebilirsiniz.(js/jquery.dataTables.min.js)

 

CONTROLLER 

class Welcome extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('datatables');
        $this->load->library('table');
        $this->load->database();   
    }

	public function index()
	{   
        $tmpl = array ( 'table_open'  => '<table id="table" border="1" cellpadding="2" cellspacing="1" class="table table-striped table-bordered">' );
        $this->table->set_template($tmpl); 

        $this->table->set_heading('Actor ID','Full Name ','Last Update' , 'Let Show It!!');

        $this->load->view('datatables_view');
	}

    public function ajax_pull()
    {
        $this->datatables->select('actor_id ,  fullname , last_update')
        ->from('actor');

        $this->datatables->where('actor_id > 100');
        $this->datatables->add_column('go', '<a href="javascript:alert(\'Actor ID :$1-- Actor Name : $2 \');">Go Go!! </a>', 'actor_id , fullname');
        $this->datatables->add_column('link', '<a href="#">Örnek Link : $1 </a>', 'site_url(actor_id)');
        echo $this->datatables->generate();
    }
}

Constructorda kullanılan kütüpnaleri config/autoload.php içine yazılarak çağırabilirsiniz.

Index fonksiyonunda tablomuzun header larını ayarlıyoruz .

Ajax_pull fonksyionu Datatables tarafından her değişiklikte Javascript Ajax sorgu gönderilecek. Buradaki kullanımları açıklayalım

Değerlerini istediğimiz tablonun kolanları

$this->datatables->select('actor_id ,  fullname , last_update')
        ->from('actor');

Kullanışlı bulduğum özellik ekstra Where bloğu ekleyebilirsiniz.

$this->datatables->where('actor_id > 100');

En kullanışlı özellik match replace ile Select ile gelen değerlerden yeni bir kolon oluşturabilirsiniz veya değiştirebilirsiniz.

$this->datatables->add_column('go', '<a href="javascript:alert(\'Actor ID :$1-- Actor Name : $2 \');">Go Go!! </a>', 'actor_id , fullname');

Önceden tanımlamış olduğunuz PHP fonksiyonlarını yeni kolon oluştururken kullanabilirsiniz. (site_url tanımlı bir codeIgniter fonksiyonudur).

$this->datatables->add_column('link', '<a href="#">Örnek Link : $1 </a>', 'site_url(actor_id)');

VIEW

      <script type="text/javascript">
        $(document).ready(function() {
	var oTable = $('#table').dataTable( {
	     "sWrapper": "dataTables_wrapper form-inline",
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": '<?php echo base_url(); ?>index.php/welcome/ajax_pull',
                //"bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "iDisplayStart ":20,
                "oLanguage": {
            "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>"
        },  
        "fnInitComplete": function() {
                //oTable.fnAdjustColumnSizing();
         },
                'fnServerData': function(sSource, aoData, fnCallback)
            {
              $.ajax
              ({
                'dataType': 'json',
                'type'    : 'POST',
                'url'     : sSource,
                'data'    : aoData,
                'success' : fnCallback
              });
            }
	} );
} );
</script>

View ayarlarında dikkat etmeniz gereken en önemli nokta elbette aJaxSource

"sAjaxSource": '<?php echo base_url(); ?>index.php/welcome/ajax_pull',

 

NOT : Template olarak Bootstrap kullandım. Tasarımdan çok anlamıyosanız ve  arayüzde  işleri hızlı çözmek istiyorsanız tavsiye ederim tabiki de kendi çözümünüzü üretebilrisiniz. Datatables template editlemek için buraya ,  bootstrap template içinde buraya bakabilrsiniz.

NOT  : Github’dan indirmiş olduğunuz kütüphane gerçekten hayat kurtarıyor. Çok dinamik ve neredeyse bütün taleplerinize cevap veerecek kadar da genişletilebilir.   Ayrıntılı fonksiyonların kullanımı için buraya bakabilirsiniz.

Github Contact Info : 

Yusuf Ozdemir <[email protected]>

Vincent Bambico <[email protected]>

 

 

Projenin son halini buradan indirebilirsiniz

Projenin demosunu görüntelemek için buraya bakabilirsiniz.

 

 

Muharrem Tığdemir