Bu makalemizde jquery’nin en önemli eklentilerinden biri olan dataTables’i göreceğiz bu eklenti ile eşzamanlı arama, sayfalama, gösterilecek kayıt sayısı, kolona göre sıralama gibi standart html table yapınıza birçok profesyonel özellik katmaktadır.

İçerik göster

jQuery datatables ile tablolarınıza profesyonel özellikler katın

Bu eklentiyi table’niza uygulamak çok basit table’niza bir id verin ve ardından head etiketleri arasına şu kodu yazınız.

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js">

1 2	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"> <script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js">

<script type="text/javascript">
    $(document).ready(function () {
        $('#ActivityTable').dataTable({
            "autoWidth": false
        });
    });
});

$(document).ready(function () {

$('#ActivityTable').dataTable({

"autoWidth": false

});

Üstteki kodda sizin değiştirmeniz gereken kısım sadece tableId yazan kısma tablonuzun(table) id’sini yazmalısınız.

Bu eklentiyi kullanabilmek için jquery kütüphanesine ihtiyacınız bulunmaktadır jquery.com sayfasından js dosyasını eklentiden önce tanımlayarak kullanabilirsiniz.

Bu eklentinin bazı özellikleri

Eşzamanlı olarak tüm kolonlar içerisinde arama
Tüm kolonlara göre artan-azalan şeklinde sıralama yapabilme
Sayfalama özelliği
Sayfa başına gösterilecek kayıt sayısı ayarlama
Toplam kayıt ve bulunduğunuz kayıt sayısı aralığını veren bilgi kutusu
Çoklu dil desteği
Özelleştirilebilir seçenekler
Gelişmiş tema desteği ile bootstrap, jquery mobile gibi birçok platform’a uyum sağlama gibi gördüğüm bazı güzel özellikler yer almaktadır.

Eklenti sayfası

http://datatables.net/

5/5 - (2 votes)

Toprak Can dedi ki:

17 Ocak 2018, 16:10

hocam acaba görüntüle.php diye bir sayfa olsa bu tablonun içindeki herhangi bir hücreden seçtiğimiz şeyi görüntüle.php?id=”hücrenin verisi” şeklinde yönlendirme yapabilmemiz mümkünmü

Yanıtla

Murat ÖNER dedi ki:

22 Ocak 2018, 11:04

Alttaki örnekte tr, ve td etiketlerine tıklandığında veri kümesine erişim yer alıyor siz kendinize göre kişiselleştirip window.location.href = ‘goruntule.php?id=[id değeri]’
şeklinde yönlendirme yapabilirsiniz.

var table = $('#example').DataTable({
    columns:[
        {sTitle:"Day",data:"day"},
        {sTitle:"Week",data:"week"},
        {sTitle:"Month",data:"month"},
        {sTitle:"Year",data:"year"}
    ],
    processing: true,
    serverSide: true,
    ajax: {
        url:"/myajaxurl",
        type:"POST"
    }
});
 
//tr on click
$(document).on('click','#example tr',function(e){
    var row_object  = table.row(this).data();
    var day         = table.row(this).data()['Day'];
    var week        = table.row(this).data()['Week'];
    var month       = table.row(this).data()['Month'];
    var year        = table.row(this).data()['Year'];
});
 
//td on click
$(document).on('click','#example td',function(e){
    var cell_clicked    = table.cell(this).data();
    var row_clicked     = $(this).closest('tr');
    var row_object      = table.row(row_clicked).data();
    var day             = table.row(row_clicked).data()['Day'];
    var week            = table.row(row_clicked).data()['Week'];
    var month           = table.row(row_clicked).data()['Month'];
    var year            = table.row(row_clicked).data()['Year'];
});

var table = $('#example').DataTable({

columns:[

{sTitle:"Day",data:"day"},

{sTitle:"Week",data:"week"},

{sTitle:"Month",data:"month"},

{sTitle:"Year",data:"year"}

processing: true,

serverSide: true,

ajax: {

url:"/myajaxurl",

type:"POST"

}

//tr on click

$(document).on('click','#example tr',function(e){

var row_object = table.row(this).data();

var day = table.row(this).data()['Day'];

var week = table.row(this).data()['Week'];

var month = table.row(this).data()['Month'];

var year = table.row(this).data()['Year'];

//td on click

$(document).on('click','#example td',function(e){

var cell_clicked = table.cell(this).data();

var row_clicked = $(this).closest('tr');

var row_object = table.row(row_clicked).data();

var day = table.row(row_clicked).data()['Day'];

var week = table.row(row_clicked).data()['Week'];

var month = table.row(row_clicked).data()['Month'];

var year = table.row(row_clicked).data()['Year'];

Kategoriler

Bloga e-posta ile abone ol

JQuery Datatables İle Tablolarınıza Profesyonel Özellikler Katın

jQuery datatables ile tablolarınıza profesyonel özellikler katın

Bu eklentinin bazı özellikleri

Eklenti sayfası

2 Responses

Bir yanıt yazın Yanıtı iptal et

jQuery datatables ile tablolarınıza profesyonel özellikler katın

Bu eklentinin bazı özellikleri

Eklenti sayfası

2 Responses

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin