Codeigniter ve jquery ile dinamik sıralama

By Admin
In BackEnd
11/Aralık/2020
Okuma Süresi: 3 dk.

Selamlar sevgili okur,

Bugün jqueryui kütüphanesinin bize sunmuş olduğu sürükleyerek sıralamak yani sortable özelliğini codeigniter projelerimizde nasıl kullanacağımızı anlatacam.

1- Öncelikle jqueryui indirmemiz ya da cdn olarak projemize dahil etmemiz gerekiyor. Şuradan ulaşabilirsiniz: https://jqueryui.com/download/

2- Sıralanacak elemanın tablomuzdaki satırlar (tr) olduğunu düşünelim. Bu satırların sıralanabilir olmasını istediğimizi jqueryui kütüphanesine söylememiz gerekiyor. Bunun için de tablomuzun tbody etiketine "sortable" adında bir class verelim. Bu classın adı "osman" da olabilirdi. Sonrasında sayfamıza dahil ettiğimiz herhangi bir js dosyasında 

$(".sortable").sortable();

diyoruz. Bu şekilde jqueryui tbody içerisindeki tr'leri sıralamak istediğimizi anlıyor. Tablonuzda satırları tutup sürükleyebilirsiniz şu an. Yalnız sayfayı yenilediğiniz an her şeyin eski haline geldiğini görürsünüz. Bu değişikliklerin kalıcı olması için veritabanı işlemleri yapmalıyız.

Ayrıca yine tbody'ye bir data-url attribute değeri veriyoruz şu şekilde; 

data-url="<?= base_url("AbcKontrol/rankSetter"); ?>"

3- Her bir satırın (tr) kendine ait id numarası olmak zorunda. 

<tr id="ord-<?php echo $yonetim_list['RowID']; ?>">

foreach ile satırları döngüye aldığımız için ord-1, ord-2 şeklinde hepsine ayrı bir id atamış oluyoruz.

4- js dosyamızda şunu yazmıştık; $(".sortable").sortable();

Bunun altına şunları yapıştırın;

$(".sortable").on("sortupdate", function () {
   var $data = $(this).sortable("serialize");
   var $data_url = $(this).data("url");
   $.post($data_url, {data: $data}, function (response) {
   });
});

Yaptığımız işlem şu; 

sortable class'ına sahip elemanlarda bir sıralama işlemi yapılmak isteniyorsa satır idlerini serialize olarak çek ve bunu da $data değişkenine ata. Aynı şekilde tbody'e verdiğimiz data-url değerini de $data-url'e aktarıyoruz. Son olarak jquery post metoduyla bu url'e serialize ettiğimiz dataları yolluyoruz.

5- Son olarak controllerda rankSetter adında bir fonksiyon oluşturuyoruz;

public function rankSetter()
            {
                $data = $this->input->post("data");
                parse_str($data, $order);
                $items = $order["ord"];
                foreach ($items as $rank => $id) {
                    $this->EnderunAdminModel->update(
                        array(
                            "id" => $id,
                            "rank !=" => $rank
                        ),
                        "tablo_adi",
                        array(
                            "rank" => $rank
                        )
                    );
                }
            }

Burada jquery post ile yolladığımız data verisini çekiyoruz. Bu veriyi parse_str ve $items değişkeni ile işimize yarar bi hale sokuyoruz yani dışındaki arrayden kurtarıyoruz. Sonrasında foreach'e sokup yeni sıralama değerini veritabanına kaydediyoruz. 

İşlem bu kadar basit. Sonrasında tutup sürükleyerek (veritabanındaki rank sütununa göre) istediğimiz verileri yeniden sıralayabiliriz.

Görüşmek üzere...

 

 

 


Codeigniter'da bütün sessionları görmek
Codeigniter'da switchery.js ile dinamik olarak durum değişikliği yapma