DataTables with JS
A lightweight table component built on jQuery and compatible with DataTables 1.10. Features include: column visibility (ColVis), per-column filtering, inline edit mode, optional export (Excel/PDF), standard but toggleable sticky header, row selection with select-all, row status highlighting, language detection via HTML attributes with extendable/customizable i18n support, optional responsive mode, customizable pager, multi-table support, and configurable CORS options for flexible data sources. Additionally, it can be easily integrated with backend services such as .NET Core.
$(function () {
FoDataTables.create({
url: 'https://fof.ford.com.tr/Content/json/products.json',
tableSelector: '#products',
pageLength: 10,
cors: true
});
});
.NET Core ile Veri Sağlama
FoDataTables hem client-side JSON hem de server-side DataTables uyumlu formatı destekler.
Server-side senaryoda DataTables start, length, search[value]
ve order[0][column] gibi parametreleri gönderir.
Backend tarafında bu parametreleri okuyarak filtreleme, sıralama ve sayfalama işlemleri yapılmalı;
dönüş JSON formatında mutlaka şu alanlar olmalıdır:
data→ Tabloya gönderilecek satırların listesi (array)recordsTotal→ Veritabanındaki toplam satır sayısırecordsFiltered→ Filtre sonrası satır sayısı
Kısa Örnek (Client-Side için basit JSON)
app.MapGet("/api/products", () =>
{
// Örn: ilk 100 ürünü dön
return Results.Json(list.Take(100));
});Server-Side Örnek (Paging, Arama, Sıralama dahil)
app.MapGet("/api/products", (HttpRequest req) =>
{
// DataTables parametrelerini oku
int start = int.TryParse(req.Query["start"], out var s) ? s : 0;
int length = int.TryParse(req.Query["length"], out var l) ? l : 10;
string search = req.Query["search[value]"];
string orderCol = req.Query["order[0][column]"];
string orderDir = req.Query["order[0][dir]"];
IQueryable query = list.AsQueryable();
// Arama
if (!string.IsNullOrWhiteSpace(search))
query = query.Where(p => p.Title.Contains(search, StringComparison.OrdinalIgnoreCase));
// Sıralama (örnek: Title’a göre)
if (orderCol == "1" && orderDir == "asc")
query = query.OrderBy(p => p.Title);
else if (orderCol == "1" && orderDir == "desc")
query = query.OrderByDescending(p => p.Title);
int total = list.Count;
int filtered = query.Count();
var page = query.Skip(start).Take(length).ToList();
return Results.Json(new {
data = page,
recordsTotal = total,
recordsFiltered = filtered
});
}); Product POCO Class
- Alan adları, DataTables’ın beklediği JSON kolonlarıyla eşleşmelidir (
title,type,author…). - ASP.NET Core varsayılan
System.Text.JsoncamelCase kullanır. Birebir ad eşlemesi için[JsonPropertyName("title")]kullanabilirsiniz. - Backend’den dönen
List<Product>, otomatik olarak DataTables satırlarına map edilir.
public class Product
{
public string Title { get; set; }
public string Type { get; set; }
public string Author { get; set; }
public int Year { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public string Path { get; set; }
}Notlar
- Büyük datasetlerde mutlaka server-side mod kullanılmalı.
- DataTables uyumu için JSON alanları:
data,recordsTotal,recordsFiltered. - ata yönetimi için
try/catch+Results.Problem()kullanabilirsiniz. Productsınıfını tablo kolonlarıyla uyumlu modelleyin.
.NET Core Data Provider
FoDataTables supports both client-side JSON and server-side DataTables-compatible format.
In server-side mode DataTables posts start, length, search[value],
and order[0][column] parameters.
Your backend should handle filtering, sorting, and paging; the JSON response must include:
data→ Array of rows to displayrecordsTotal→ Total rows in DBrecordsFiltered→ Row count after filtering
Short Example (simple client-side JSON)
app.MapGet("/api/products", () =>
{
// Return first 100 rows
return Results.Json(list.Take(100));
});Server-Side Example (Paging, Search, Order)
app.MapGet("/api/products", (HttpRequest req) =>
{
int start = int.TryParse(req.Query["start"], out var s) ? s : 0;
int length = int.TryParse(req.Query["length"], out var l) ? l : 10;
string search = req.Query["search[value]"];
string orderCol = req.Query["order[0][column]"];
string orderDir = req.Query["order[0][dir]"];
IQueryable query = list.AsQueryable();
if (!string.IsNullOrWhiteSpace(search))
query = query.Where(p => p.Title.Contains(search, StringComparison.OrdinalIgnoreCase));
if (orderCol == "1" && orderDir == "asc")
query = query.OrderBy(p => p.Title);
else if (orderCol == "1" && orderDir == "desc")
query = query.OrderByDescending(p => p.Title);
int total = list.Count;
int filtered = query.Count();
var page = query.Skip(start).Take(length).ToList();
return Results.Json(new {
data = page,
recordsTotal = total,
recordsFiltered = filtered
});
}); Product POCO Class
- Property names should match DataTables JSON columns (
title,type,author…). - ASP.NET Core’s
System.Text.Jsonuses camelCase by default; use[JsonPropertyName("title")]if you need exact names. - Returning
List<Product>maps directly to table rows.
public class Product
{
public string Title { get; set; }
public string Type { get; set; }
public string Author { get; set; }
public int Year { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public string Path { get; set; }
}Notes
- For large datasets use server-side mode.
- Required JSON fields:
data,recordsTotal,recordsFiltered. - Add
try/catchand returnResults.Problem()on errors. - Model
Productto match your table columns.
Furnizare date cu .NET Core
FoDataTables suportă atât JSON client-side, cât și format compatibil DataTables pe server-side.
În modul server-side, DataTables trimite parametri precum start, length, search[value]
și order[0][column]. Backend-ul trebuie să aplice filtrare, sortare și paginare; răspunsul JSON trebuie să conțină:
data→ Lista de rânduri afișaterecordsTotal→ Totalul rândurilor în DBrecordsFiltered→ Rânduri după filtrare
Exemplu scurt (JSON simplu pentru client-side)
app.MapGet("/api/products", () =>
{
// Primele 100 de înregistrări
return Results.Json(list.Take(100));
});Exemplu Server-Side (Paging, Căutare, Sortare)
app.MapGet("/api/products", (HttpRequest req) =>
{
int start = int.TryParse(req.Query["start"], out var s) ? s : 0;
int length = int.TryParse(req.Query["length"], out var l) ? l : 10;
string search = req.Query["search[value]"];
string orderCol = req.Query["order[0][column]"];
string orderDir = req.Query["order[0][dir]"];
IQueryable query = list.AsQueryable();
if (!string.IsNullOrWhiteSpace(search))
query = query.Where(p => p.Title.Contains(search, StringComparison.OrdinalIgnoreCase));
if (orderCol == "1" && orderDir == "asc")
query = query.OrderBy(p => p.Title);
else if (orderCol == "1" && orderDir == "desc")
query = query.OrderByDescending(p => p.Title);
int total = list.Count;
int filtered = query.Count();
var page = query.Skip(start).Take(length).ToList();
return Results.Json(new {
data = page,
recordsTotal = total,
recordsFiltered = filtered
});
}); Clasa POCO Product
- Numele proprietăților ar trebui să corespundă coloanelor JSON ale tabelului (
title,type,author…). System.Text.Jsonfolosește camelCase implicit; pentru mapare exactă utilizați[JsonPropertyName("title")].- Returnarea unui
List<Product>se mapează direct pe rândurile tabelului.
public class Product
{
public string Title { get; set; }
public string Type { get; set; }
public string Author { get; set; }
public int Year { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public string Path { get; set; }
}Note
- Pentru seturi mari de date folosiți modul server-side.
- Câmpuri JSON necesare:
data,recordsTotal,recordsFiltered. - Gestionați erorile cu
try/catchși returnațiResults.Problem(). - Modelați
Productconform coloanelor din tabel.