MVC ile örnek tablo ve Datatable Eklentisi
MVC ile admin panellerinde kullanacağımız örnek listeleme tablosu
<table id="tbl1" class="table table-bordered
">
<thead>
<tr>
<th>ÜRÜN ID</th>
<th>ÜRÜNN ADI</th>
<th>ÜRÜNN
MARKASI</th>
<th>ÜRÜNN
KATEGORİ</th>
<th>ÜRÜNN
FİYATI</th>
<th>STOK</th>
<th>SİL</th>
<th>GÜNCELLE</th>
</tr>
</thead>
<tbody>
@foreach (var urn in Model)
{
<tr>
<th>@urn.URUNID</th>
<td>@urn.URUNAD</td>
<td>@urn.MARKA</td>
<td>@urn.TBLKATEGORILER.KATEGORIAD</td>
<td>@urn.FIYAT</td>
<td>@urn.STOK</td>
<td><a href="/Urun/SIL/@urn.URUNID" class="btn btn-danger"> SİL</a></td>
<td><a href="/Urun/UrunGetir/@urn.URUNID" class="btn btn-success"> GÜNCELLE</a></td>
</tr>
}
</tbody>
</table>
Peki bu tabloyu dinamik hale getirmek ve serarch alanı eklemek için ne yapmalıyız ? Datatable eklentisini türkçe hale getirmek de oldukça kolay !
Tablo ve Sayfalama Datatable
Eklentisi
Ø
Proje sağ tık – Manage
NuGet Packedes tıklanır.
Ø
Browse de
eklentisi install edilir.
Ø
Tabloda id=”tbl1” gibi bir
id verilmiş olmalı gerekli. İstediğimizi yazabiliriz.
Ø Proje dosyalarına gelen Content klasörü içinde
DataTables-CSS içinde bulunan herhangi Css dosyasını sürükleyip index
sayfamızın en altında bir yere bırakırız. Otomatik linki oluşturacaktır. Her
CSS ayrı tasarım kullanmaktadır. Unutma, deneyerek en güzelini bulursun. Ben dataTables.material.css bunu kullanıyorum.
Ø Daha sonra sayfanın en altına sırasıyla
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/fh-3.1.4/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/fh-3.1.4/datatables.min.js"></script>
<script>
$('#tbl1').dataTable({
language: {
"sDecimal": ",",
"sEmptyTable": "Tabloda herhangi bir veri mevcut değil",
"sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar
gösteriliyor",
"sInfoEmpty": "Kayıt yok",
"sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "Sayfada _MENU_ kayıt göster",
"sLoadingRecords": "Yükleniyor...",
"sProcessing": "İşleniyor...",
"sSearch": "Ara:",
"sZeroRecords": "Eşleşen kayıt bulunamadı",
"oPaginate": {
"sFirst": "İlk",
"sLast": "Son",
"sNext": "Sonraki",
"sPrevious": "Önceki"
},
"oAria": {
"sSortAscending": ": artan sütun sıralamasını aktifleştir",
"sSortDescending": ": azalan sütun sıralamasını
aktifleştir"
},
"select": {
"rows": {
"_": "%d kayıt seçildi",
"0": "",
"1": "1 kayıt seçildi"
}
}
}
});
</script>
Ø
Bu kodlar yazılır. İşlem
bu kadar.
Yorumlar
Yorum Gönder