Datatables eklentisi https://www.datatables.net/ adresinden ücretsiz olarak dağıtılan güçlü bir jquery table eklentisidir. bU eklentiyi kullanarak tabloda yaptığımız CRUD işlemlerini daha kolay yapabilmekteyiz. Aşağıda eklentinin kullanımına ilişkin küçük ipuçları bulunmaktadır.

Satır sayısını bulmak :

Var satirsayisi = $('#secili-stoklar-datatable').dataTable().fnGetData().length;

Extra kolon eklemek

Column tanımlaması yaparken sütunu eklemek istediğimiz indeksin data değerini boş bırakırız.

"columns": [

                       { "data": "" },

                       { "data": "StokId" },

                       { "data": "StokAdi" },

…

..

],

"columnDefs": [{

                        "targets": 0,

                        "data": null,

                        "defaultContent": "<span class='ekle'><i class='fa fa-2x fa-plus'></i></span>"

                    }],

Şeklinde column tanımı yaparsak , 0. İndekste defaultContent ile belirlediğimiz içerik 0. Sütuna eklenecektir.

Satır Verisini Almak

   var data =$('#siparisTablo-datatable') DataTable().row($(this).parents('tr')).data(); 

şeklinde data değişkeninin içine dizi şeklinde atanır.

data['StokId'] şeklinde dizinin (satırın) değerlerine erişilebilir.

Satırı Seçmek:

row('.selector); metodu içine verdiğimiz selector değerine göre bir veya birden fazla satırı seçebiliriz.Aşağıdaki tek satırlık kod selected sınıfına sahip satırları seçer.

var satir = table.row('.selected');

Satırı Seçili Yapmak

var satir = $(this).parents('tr').addClass('selected'); //this  satırın içindeki bir elemanı temsil etmektedir.

Footer a Sütun toplamlarını yazdırmak

Datatable tanımlarken "footerCallback" propertisine yazacağımız kodlarkolonbazında işlem yapmak için kullanılabilir.

"footerCallback": function (row, data, start, end, display) {

                        var api = this.api(), data;



                        //  Hücrenin değerini Numbera çeviriyoruz.

                        var intVal = function (i) {

                            return typeof i === 'string' ?

                                i.replace(',', '.') * 1 :

                                typeof i === 'number' ?

                                i : 0;

                        };

// 7. Sütunun değerlerini toplayıp toplamAraTutar değişkenine atıyoruz.

                        toplamAraTutar = api.column(7).data()

                            .reduce(function (a, b) {

                                return intVal(a) + intVal(b);

                            }, 0);

                     // Elde ettiğimiz değeri istersek sayfanın başka bir yerindeki bi inputun içine yazdırabiliriz .

                        $('#ToplamAraTutar-label').html(toplamAraTutar.toFixed(4).replace('.', ',') + '  TL');





                        // Bu şekilde tablonun footer ına da yazılabilir.

                        $(api.column(7).footer()).html(

                             toplamAraTutar.toFixed(4).replace('.', ',') + '  TL'

                        );

                    }

Satırı Silmek

$('#secili-stoklar-datatable').DataTable().row($(this).parents('tr')).remove().draw();

remove() metodu ile seçili satırı sileriz. draw() metoduyla da tabloyu güncelleriz.

Tek bir Hücreyi Güncellemek

Datatable Lokalizasyon

http://cdn.datatables.net/plug-ins/1.10.10/i18n/Turkish.json adresindeki json verisini indirilip projeye dahil edilebilir veya cdn olarka kullanılabilir.

Datatable a implementasyouda aşağıdaki şekildedir.

$('#secili-stoklar-datatable').DataTable().row($(this).parents('tr')).remove().draw();

Dosya yolu yerine cdn adresi de verilebilir.

Hücreye input select vb yerleştirmek.

Şeklinde 4 . Sütuna sepete ekle butonu ekledik.

"columnDefs": [{

. . .

. . .

, {

                        "targets":4 ,

                        "data": null,

                        "render": function (data, type, row) {

                            return '<input type="button" class="SepeteEkle" data-StokId="' + row['RefStokId'] + '" value="Sepete Ekle"/>'

                        }

                    }],

Sütunu gizlemek (visible : False )

"columnDefs": [ ‘ in içine aşağıdaki kod (14. Kolonu gizlemek için)

, {

                "targets": 14,

                "visible": false,

                  "searchable": false



                }

Datatables Butonlar

Butonlar için datatables ın buton eklentisinden yararlanılır.

<script src=" https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js "></script>

Yolunda javascript dosyası mevcuttur.

Sonrasında Datatable tanımında aşağıdaki yanımlamaları yaparak datatables ın butonlarıı kullanabiliriz.

Açıklamaları şu şekildedir.

Print: Tabloyu yazıcıya göndermek için

Copy: tabloyu ClipBoarda kopyalamak için

Pdf/excel/csv/ : çıktı üretmek osya olarak kaydetmek için

Colvis: Dinamik olarak sütun gösterip gizlemek için

  buttons: [

                                { extend: 'print', className: 'btn dark btn-default' },

                                { extend: 'copy', className: 'btn lime btn-default' },

                                { extend: 'pdf', className: 'btn green btn-default' },

                                { extend: 'excel', className: 'btn yellow btn-default ' },

                                { extend: 'csv', className: 'btn purple btn-default ' },

                                { extend: 'colvis', className: 'btn dark btn-default', text: 'Columns' }

                    ],

Tabloyu sayfa yüklenrken ajax ile doldurmak.

'destroy' her draw() metodu çağrldığında tabloyu baştan başlatmak için .

Columns kısmında yapılan data tanımlamaları ajax'tan gelecek json verisinin fieldları ile aynı isimde olmalıdır. Gelen veriler ile data ile tanımlanan değerler aynı olmalıdır.

'destroy': true,

                    "columns": [

                       { "data": "" },

                       { "data": "StokId" },

                       { "data": "StokAdi" },

                       { "data": "Barkod" },

                       { "data": "Kdv" },

                       { "data": "Birim" },

                       { "data": "Kategori" },

                       { "data": "Durum" },

                       { "data": "AlisFiyati" },

                       { "data": "SatisFiyati" },

                       {"data":"VadeTarihi"},                    ],

                    "processing": true,

                    "serverSide": true,

                    "ajax": {

                        "type": "POST",

                        "url": '/Stok/TumStoklar,

                        "contentType": 'application/json; charset=utf-8',

                        'data': function (data) { return data = JSON.stringify(data); }

                    },

Yorumlar

İsim: Serdar Karaca

Tarih: 29.8.2016 18:59:26

Merahba, Peki datatable'i bu şekilde doldurduk diyelim. Sonra üzerinde değişiklik yaptık ve bu içeriği farklı bir veritabanında ki tabloya yazmak istersek ne yapmamız gerekiyor ?

İsim:

Tarih: 11.10.2016 10:31:49

Birden fazla DataSource oluşturarak yapmanız mümkün. Detaylar için MSDN üzerinden bu sayfayı ziyaret edebilirsiniz.

https://msdn.microsoft.com/en-us/library/4esb49b4.aspx


Yorum Yaz

Yorumlarınız denetimden geçtikten sonra yayınlanmaktadır...