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.
Var satirsayisi = $('#secili-stoklar-datatable').dataTable().fnGetData().length;
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.
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.
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');
var satir = $(this).parents('tr').addClass('selected'); //this satırın içindeki bir elemanı temsil etmektedir.
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'
);
}
$('#secili-stoklar-datatable').DataTable().row($(this).parents('tr')).remove().draw();
remove() metodu ile seçili satırı sileriz. draw() metoduyla da tabloyu güncelleriz.
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.
Ş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"/>'
}
}],
"columnDefs": [ ‘ in içine aşağıdaki kod (14. Kolonu gizlemek için)
, {
"targets": 14,
"visible": false,
"searchable": false
}
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' }
],
'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); }
},
İsim: Serdar Karaca
Tarih: 29.08.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 ?
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.