Jquery Datatable (Geliştiriciler İçin Nasıl Çalışır)
Veri sunumu, web geliştirmesinin kritik bir yönüdür ve tablosal verilerle uğraşırken, etkileşimli ve özelliği zengin bir tabloya sahip olmak esastır. jQuery DataTables, dinamik ve duyarlı tablolar oluşturmak için gelişmiş işlevler sağlayan güçlü bir JavaScript kütüphanesidir. Bu makalede, jQuery DataTables'i bir ASP.NET web uygulamasına entegre etmeyi ve tablosal verilerin sunumunu nasıl geliştireceğimizi keşfedeceğiz.
Bir ASP.NET Web Uygulamasında jQuery DataTables Nasıl Kullanılır?
- Bir Web Uygulaması Oluşturun veya Açın.
- Entity Framework Paketlerini Yükleyin.
- Model, DB Bağlamı ve Denetleyici Ekleyin.
- DB Bağlantı Dizesi Ekleyin ve Yapılandırmayı Ayarlayın.
- Göç Ekleyin ve Veritabanını Güncelleyin.
- jQuery DataTables İstemci Tarafı Kütüphanesini Ekleyin.
- HTML tablo ve JavaScript kodu ekleyin.
- Uygulamayı Derleyin ve Çalıştırın.
- Verileri IronXL ile Excel Manipülasyonu kullanarak Excel'e İhracat Edin.
jQuery DataTables Nedir?
jQuery DataTables, tablosal verilerle başa çıkmak için hafif, esnek ve özelliği zengin bir jQuery eklentisidir. Sıralama, arama ve sayfalama gibi geniş bir işlev yelpazesi sunar, büyük veri kümelerini kullanıcı dostu bir şekilde sunmak için ideal bir seçenektir.
İstemci Tarafı İşleme
İstemci tarafı işlememde, tarayıcı veriyi yerel olarak işlemekle güçlendirilmiştir. jQuery DataTables, güçlü özellikleri aracılığıyla kullanıcının tarayıcısında doğrudan verilerle dinamik etkileşim ve manipülasyon sağlar. Bu yaklaşım daha küçük veri kümeleri için sorunsuz çalışsa da, potansiyel performans darboğazları ve artan kaynak tüketimi nedeniyle kapsamlı veri kümeleriyle başa çıkarken zorluklarla karşılaşabilir.
Bu makalede, ASP.NET Razor Sayfa uygulamasında istemci tarafı işlemeyi keşfedecek, ayrıca daha küçük veri kümeleri için sunduğu avantajları vurgulayacak ve pürüzsüz ve duyarlı bir kullanıcı deneyimi sağlamak için potansiyel dikkat edilmesi gereken noktalar ve optimizasyonlar hakkında bilgiler sağlayacağız.
Bir ASP.NET Web Uygulamasında jQuery DataTables'e Başlamak
Bu makale, .NET Framework 4.8 hedefleyen bir ASP.NET Razor Sayfa Web Uygulaması kullanacaktır. İhtiyacınıza göre Blazor, MVC veya Web Formları kullanabilirsiniz.
Bu makalede Kod-İlk Yaklaşım kullanılacaktır. Tercihinize göre Veritabanı-İlk Yaklaşımı kullanabilirsiniz. Kod-İlk Yaklaşımını kullanmak için aşağıdaki paketleri yüklememiz gerekiyor.
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.Design
- Microsoft.EntityFrameworkCore.SqlServer
- Microsoft.EntityFrameworkCore.Tools
Yukarıdaki paketleri NuGet Paket Yöneticisi Konsolu'ndan Install-Package komutunu kullanarak veya NuGet Paket Yöneticisi çözümünden arama yaparak yükleyin.
Projemizi, Program.cs içinde Model sınıfı, ApplicationDbContext Sınıfı, Denetleyici, Bağlantı Dizesi ve hizmet yapılandırması ekleyerek kurmamız gerekiyor.
Model Sınıfı Ekle
Bu örnek için Employee model sınıfını kullanıyorum. İhtiyacınıza göre kullanabilirsiniz.
public class Employee
{
public int Id { get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string PhoneNumber { get; set; } = string.Empty;
public string Gender { get; set; } = string.Empty;
public string Designation { get; set; } = string.Empty;
}
public class Employee
{
public int Id { get; set; }
public string FirstName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
public string PhoneNumber { get; set; } = string.Empty;
public string Gender { get; set; } = string.Empty;
public string Designation { get; set; } = string.Empty;
}
Public Class Employee
Public Property Id() As Integer
Public Property FirstName() As String = String.Empty
Public Property LastName() As String = String.Empty
Public Property Email() As String = String.Empty
Public Property PhoneNumber() As String = String.Empty
Public Property Gender() As String = String.Empty
Public Property Designation() As String = String.Empty
End Class
ApplicationDbContext Sınıfını Ekleyin
Entity Framework'ü kurmak için ApplicationDbContext sınıfını eklememiz gerekiyor.
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
{
}
public DbSet<Employee> Employees { get; set; }
}
public class ApplicationDbContext : DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
{
}
public DbSet<Employee> Employees { get; set; }
}
Public Class ApplicationDbContext
Inherits DbContext
Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
MyBase.New(options)
End Sub
Public Property Employees() As DbSet(Of Employee)
End Class
Çalışan Denetleyici Ekleyin
Uç nokta oluşturmak için EmployeeController ekleyin.
[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
private readonly ApplicationDbContext _context;
public EmployeeController(ApplicationDbContext context)
{
_context = context;
}
[HttpGet]
public IActionResult GetEmployees()
{
try
{
var employeeData = _context.Employees.ToList();
var jsonData = new { data = employeeData };
return Ok(jsonData);
}
catch (Exception ex)
{
// Log exception here
throw;
}
}
}
[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
private readonly ApplicationDbContext _context;
public EmployeeController(ApplicationDbContext context)
{
_context = context;
}
[HttpGet]
public IActionResult GetEmployees()
{
try
{
var employeeData = _context.Employees.ToList();
var jsonData = new { data = employeeData };
return Ok(jsonData);
}
catch (Exception ex)
{
// Log exception here
throw;
}
}
}
<Route("api/[controller]")>
<ApiController>
Public Class EmployeeController
Inherits ControllerBase
Private ReadOnly _context As ApplicationDbContext
Public Sub New(ByVal context As ApplicationDbContext)
_context = context
End Sub
<HttpGet>
Public Function GetEmployees() As IActionResult
Try
Dim employeeData = _context.Employees.ToList()
Dim jsonData = New With {Key .data = employeeData}
Return Ok(jsonData)
Catch ex As Exception
' Log exception here
Throw
End Try
End Function
End Class
Burada, veriyi sunucudan tam olarak istemci tarafında alacağımız ve sayfalandırma, arama ve sıralamayı istemci tarafında uygulayacağımız için HttpGet yöntemi kullanıyoruz. İstemci tarafında gösterilecek bir JSON dizisi döndürüyoruz.
Bağlantı Dizesi Ekleyin
Aşağıdaki bağlantı dizesini appsettings.json dosyasına ekleyin.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}
SQL Server ile bağlantı kurmak için Program.cs sınıfındaki webApplication.CreateBuilder() satırının altına aşağıdaki satırı ekleyin.
builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});
builder.Services.AddDbContext(Of ApplicationDbContext)(Sub(options)
options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"))
End Sub)
Migrasyonu Çalıştırın
Bir sonraki adım, Kod-İlk Yaklaşım kullandığımız için migrasyonu çalıştırmaktır. Paket Yöneticisi Konsolu'nda aşağıdaki komutu çalıştırın.
Add-Migration init
Add-Migration init
Bu komut, bir migrasyon oluşturacaktır. Şimdi, bu migrasyonu veritabanına uygulamak için aşağıdaki komutu çalıştırın.
update-database
update-database
Projemiz kuruldu ve veritabanı hazır olduğuna göre, jQuery kütüphanesini ve HTML tablolarını eklememiz UI aracını hazırlar. Bu örnekte veri kaynağı olarak SQL Server kullanıldı, ancak başka bir veritabanı da kullanabilirsiniz.
jQuery DataTables Kütüphanesini Ekleyin
Projemize, jQuery JavaScript kütüphanesi için bir tablo geliştiren eklenti olan jQuery DataTables kütüphanesini eklememiz gerekiyor. Projeye sağ tıklayıp 'Ekle' seçeneğini, ardından 'İstemci Tarafı Kütüphanesi Ekle' seçeneğini seçerek ekleyebiliriz. Küçük bir pencere açılacak, burada 'jquery datatables' araması yapabiliriz ve aşağıda gösterildiği gibi yükleyebiliriz:

HTML Tablosu Ekleyin
Boş bir tablo gövdesi ile bir HTML tablosu ekleyelim. jQuery DataTable yapılandırması sırasında gerekli sütun başlıkları ekleyeceğiz. Index.cshtml dosyasına aşağıdaki kodu ekleyin.
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<div class="container">
<br />
<div style="width:90%; margin:0 auto;">
<table id="employeeDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
</table>
</div>
</div>
@section Scripts
{
<script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
<script src="~/js/EmployeeDatatable.js"></script>
}
wwwroot/Js klasörü içine EmployeeDatatable.js dosyasını eklememiz gerekiyor. Bu dosyada, filfiltrasyon, sayfalama, arama, sıralama gibi jQuery DataTable'ın gelişmiş özelliklerine ve Ajax çağrısına sahip olacağız.
EmployeeDatatable.js Dosyası Oluşturun
wwwroot/Js klasörü içine bir EmployeeDatatable.js dosyası oluşturun. Aşağıdaki kodu ekleyin.
$(document).ready(function () {
$("#employeeDatatable").DataTable({
"processing": true,
"serverSide": false,
"filter": true,
"ajax": {
"url": "/api/Employee",
"type": "GET",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
{ "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
{ "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
{ "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
{ "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
{ "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
]
});
});
$(document).ready(function () {
$("#employeeDatatable").DataTable({
"processing": true,
"serverSide": false,
"filter": true,
"ajax": {
"url": "/api/Employee",
"type": "GET",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
{ "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
{ "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
{ "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
{ "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
{ "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
]
});
});
Zengin özellikli jQuery DataTables kütüphanesi kullandık. Bu güçlü jQuery eklentisi, istemci tarafında gelişmiş özellikler uygulamamıza minimal çaba ile olanak tanır.
Şimdi, bu uygulamayı derleyin ve çalıştırın.
Çıktı
ASP.NET içinde jQuery'nin yardımıyla çok etkileşimli bir kullanıcı arayüzü hazır olduğumuzu görebiliyoruz. Gösterilen veri aşağıdaki gibidir:

Şimdi, sayfalama istemci tarafında uygulandığı için, aşağıda gösterildiği gibi tüm veri sunucudan gönderilmektedir:

Çıktı Kullanıcı Arayüzü
Arama yapabilir, sıralayabilir ve sayfayı değiştirebiliriz; hepsi istemci tarafında gerçekleştirilecektir, aşağıda gösterildiği gibidir:

IronXL'e Giriş
.NET Excel Dosya Manipülasyonu için IronXL, .NET uygulamalarında Excel dosyaları ile çalışmanıza izin veren bir kütüphanedir. XLS, XLSX, CSV ve TSV gibi çeşitli formatlarda Excel belgeleri oluşturabilir, okuyabilir, düzenleyebilir ve kaydedebilir. Microsoft Office veya Excel Interop yüklü olmasını gerektirmez. .NET 5, Core, Framework ve Azure'u destekler.
Genellikle verileri Excel veya CSV dosyalarına aktarma gereksinimimiz vardır. Bu durumda IronXL en iyi seçenektir. Şimdi, verilerimizi bir Excel dosyasına ihraç etmek için kod yazacağız.
IronXL Yükle
IronXL kütüphanesini, Paket Yöneticisi Konsolu'na aşağıdaki komutu girerek projenize yükleyin.
Install-Package IronPdf
Bu, projemize IronXL ve gerekli bağımlılıklarını kuracaktır. IronXL NuGet Paketini doğrudan da indirebilirsiniz.
Veriyi Excel'e Aktarın
Çalışan Listemizi bir Excel dosyasına dönüştürmek için kod yazalım.
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
ws["A1"].Value = "Employee ID";
ws["B1"].Value = "First Name";
ws["C1"].Value = "Last Name";
ws["D1"].Value = "Designation";
ws["E1"].Value = "Gender";
ws["F1"].Value = "Phone Number";
ws["G1"].Value = "Email";
int rowCount = 2;
// Add Data Rows
foreach (Employee employee in employeeList)
{
ws["A" + rowCount].Value = employee.Id.ToString();
ws["B" + rowCount].Value = employee.FirstName;
ws["C" + rowCount].Value = employee.LastName;
ws["D" + rowCount].Value = employee.Designation;
ws["E" + rowCount].Value = employee.Gender;
ws["F" + rowCount].Value = employee.PhoneNumber;
ws["G" + rowCount].Value = employee.Email;
rowCount++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
ws["A1"].Value = "Employee ID";
ws["B1"].Value = "First Name";
ws["C1"].Value = "Last Name";
ws["D1"].Value = "Designation";
ws["E1"].Value = "Gender";
ws["F1"].Value = "Phone Number";
ws["G1"].Value = "Email";
int rowCount = 2;
// Add Data Rows
foreach (Employee employee in employeeList)
{
ws["A" + rowCount].Value = employee.Id.ToString();
ws["B" + rowCount].Value = employee.FirstName;
ws["C" + rowCount].Value = employee.LastName;
ws["D" + rowCount].Value = employee.Designation;
ws["E" + rowCount].Value = employee.Gender;
ws["F" + rowCount].Value = employee.PhoneNumber;
ws["G" + rowCount].Value = employee.Email;
rowCount++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
' Create a new workbook instance
Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
' Get the default worksheet
Dim ws As WorkSheet = wb.DefaultWorkSheet
' Add Header Row
ws("A1").Value = "Employee ID"
ws("B1").Value = "First Name"
ws("C1").Value = "Last Name"
ws("D1").Value = "Designation"
ws("E1").Value = "Gender"
ws("F1").Value = "Phone Number"
ws("G1").Value = "Email"
Dim rowCount As Integer = 2
' Add Data Rows
For Each employee As Employee In employeeList
ws("A" & rowCount).Value = employee.Id.ToString()
ws("B" & rowCount).Value = employee.FirstName
ws("C" & rowCount).Value = employee.LastName
ws("D" & rowCount).Value = employee.Designation
ws("E" & rowCount).Value = employee.Gender
ws("F" & rowCount).Value = employee.PhoneNumber
ws("G" & rowCount).Value = employee.Email
rowCount += 1
Next employee
' Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx")
End Sub
Basit ve kolay bir şekilde listeden bir Excel dosyası oluşturduk.

IronXL, XLSX dosyaları oluşturma üzerine kapsamlı öğreticiler, Excel dosyalarını okuma üzerine kod örnekleri ve ayrıntılı belgeler sunar; böylece kapsamlı API'sini en iyi şekilde kullanmanıza yardımcı olur.
Sonuç
Sonuç olarak, jQuery DataTables, ASP.NET web uygulamalarında tablosal verilerin sunumunu dönüştürmek için güçlü bir varlık olarak ortaya çıkmıştır. Hafif ama özelliği zengin doğası, etkileşimli tablolar oluşturmayı kolaylaştırır, sıralama, arama ve sayfalama ön planda yer alır. İstemci tarafı işlemenin inceliklerini keşfettik, tarayıcının yeteneklerini daha küçük veri kümeleri için kullanırken, daha büyük veri hacimleriyle ilgili potansiyel zorlukları kabul ettik. ASP.NET Razor Sayfa uygulamasını kurma ve jQuery DataTables'i entegre etme üzerindeki adım adım kılavuz, geliştiricilere pratik bilgiler sağlar. Ek olarak, IronXL'nin Excel ile ilgili görevler için kesintisiz bir çözüm olarak tanıtılması, araç setine değerli bir katman ekler, verilerin verimli bir şekilde ihraç edilmesini sağlar. Bu araçlarla donanmış geliştiriciler, verileri etkileyici ve erişilebilir bir şekilde sunarak kullanıcı deneyimini yükseltebilirler.
IronXL, geliştirici sayısı, proje sayısı ve yeniden dağıtım ihtiyaçlarına bağlı olarak çeşitli lisans seçenekleri sunar. Lisanslar süresizdir ve ücretsiz destek ve güncellemeler içerir.
Sıkça Sorulan Sorular
jQuery DataTables, ASP.NET web uygulamalarında veri sunumunu nasıl artırabilir?
jQuery DataTables, sıralama, arama ve sayfalama gibi özellikler sunarak veri sunumunu iyileştirir ve büyük veri kümeleri ile etkileşimde, kullanıcılar için duyarlı ve kullanıcı dostu bir deneyim sağlar.
Bir ASP.NET Razor Sayfa uygulamasına jQuery DataTables'i entegre etmek için temel adımlar nelerdir?
Bir ASP.NET Razor Sayfa uygulamasına jQuery DataTables'i entegre etmek için, modeli, DbContext'i ve denetleyiciyi ayarlayarak başlayın, veritabanı bağlantısını yapılandırın ve Entity Framework ile Kod-İlk yaklaşımını kullanarak verileri verimli bir şekilde yönetmek için istemci tarafı işlemi uygulayın.
Büyük veri kümelerini yönetirken sunucu tarafı işlem jQuery DataTables için nasıl fayda sağlar?
Sunucu tarafı işlem, verilerin yönetilmesi için işlemleri sunucuya bırakarak jQuery DataTables'e fayda sağlar ve bu da büyük veri kümeleriyle çalışırken performansı ve verimliliği artırır. Büyük veri hacimleri ile çalışıldığında istemci tarafı işlem yavaşlayabilir.
IronXL, bir ASP.NET uygulamasından Excel'e veri aktarmada hangi rolü oynar?
IronXL, geliştiricilerin bir yeni çalışma kitabı oluşturarak ve veri kümesinden veri satırlarını doldurarak Excel'e veri aktarmasını sağlar ve Microsoft Office gerektirmeden Excel dosyası manipulationunu basitleştirir.
.NET uygulamalarında Microsoft Office olmadan Excel dosyaları ile çalışmak mümkün mü?
Evet, IronXL .NET uygulamalarının Microsoft Office'ten bağımsız olarak Excel dosyaları ile çalışmasını sağlar ve XLS, XLSX, CSV ve TSV gibi çeşitli formatları destekler.
IronXL'nin .NET projelerinde kullanılabileceği lisans seçenekleri nelerdir?
IronXL, geliştirici sayısına, proje sayısına ve dağıtım gereksinimlerine dayanarak çeşitli lisans seçenekleri sunar. Lisanslar sonludur ve ücretsiz destek ve güncellemeler içerir.
jQuery DataTables ile ASP.NET'teki Kod-İlk yaklaşımının kullanmanın avantajları nelerdir?
ASP.NET'teki Kod-İlk yaklaşımı, veritabanı modelinin ve bağlamının kolayca kurulup yapılandırılmasını destekler, dinamik veri yönetimi ve artırılmış interaktivite için ön uç DataTables ile entegrasyon sağlar.
Bir ASP.NET uygulamasında jQuery DataTables ile ilgili yaygın sorunlar nasıl giderilebilir?
jQuery DataTables ile ilgili yaygın sorunlar, script ve stil dosyalarının doğru şekilde dahil edildiğinden emin olunarak, veri kaynak yollarının doğrulanarak, JavaScript sorunları için konsol hatalarının kontrol edilerek ve sunucu tarafı işleme kurulumunun doğrulanarak giderilebilir.




