Tabloya arama fonksiyonu, sayfalama, sıralama gibi birçok özelliği Jquery Datatable ile sağlayabiliriz.
Project : Sağ Tık>Manage NuGetPackages>Browse : jquery.datatables>Install (install sadece js ve css dosyalarını indirmemizi sağlıyor internetten de manuel olarak ekleyebiliriz)
I. Scripts>DataTables>jquery.DataTables.min.js ve dataTables.bootstrap.min.js dosyalarını sürükleyerek _Layout’umuzda ilgili alana (body’nin alt kısmına bıraktık)
<body>
@Html.Partial("_Navbar")
<div class="container">
@RenderBody()
</div>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
</body>
II. Content/DataTables/css>dataTables.bootstrap.min.css dosyasını da _Layout’umuzda csslerin bulunduğu yere ekledik
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />
</head>
III. DataTables fonk çağıracağız bunun için oluşturduğumuz Custom.js dosyasına gittik ve kodlarımızı yazdık
$(function () { //Sayfa yüklendiğinde bu func otomatik çalışır
$("#tblDepartments").DataTable({ //tblDepartments id'li elemanı DataTable yap
"language": { //DataTable'ın dilini Türkçeleştir
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
}
});
});
Mehmet İçme 
Yorum bırakın