datatable js، کتابخانه‌ای جهت ساخت جداول است و نسبت به رقیب اصلی خودش یعنی kendo telerik، از سادگی بیشتری برخوردار هست و امکانات خوبی هم دارد.
اگر برای جداول صفحات خود، از کتابخانه‌ی جی‌کوئری datatable استفاده میکنید، بعد از مدتی که تعداد رکورد‌ها زیاد میشوند، شاهد کند شدن صفحه خود خواهید شد. برای رفع این مشکل نیاز به پیاده سازی pagination دارید که به صورت خیلی ساده‌ای قابل پیاده سازی هست و شما تغییر کمی را در سمت سرور اعمال میکنید و سایر موارد توسط خود کتابخانه انجام میشود.
در ابتدا به بررسی کد‌ها و تغییرات سمت فرانت‌اند و صفحه‌ی cshtml می‌پردازیم:
1- تابع Ajax ای که وظیفه‌ی دریافت اطلاعات را دارد، به کل پاک کنید. چون Ajax به صورت یک آبجکت، به درون خود دیتاتیبل منتقل خواهد شد.
2- در صفحه خود، کد زیر را قرار دهید (جهت جلوگیری از 400 bad request) که این کار فقط برای هندلر‌های razor page و یا controller نیاز است و اگر از API استفاده میکنید، مسلما نیازی به این مدل تنظیمات نیست.
@Html.AntiForgeryToken()
//Post in Ajax services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
function initDataTables() {
table.destroy();
table = $("#tblJs").DataTable({
processing: true,
serverSide: true,
filter: true,
ajax: {
url: '@Url.Page("yourPage","yourHandler")',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
type: "POST",
datatype: "json"
},
language: {
url: "/Persian.json"
},
responsive: true,
select: true,
columns: scheme,
select: true,
});
} processing: true,
serverSide: true,
filter: true,
ajax: {
url: '@Url.Page("yourPage","yourHandler ")',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
type: "POST",
datatype: "json"
},
حالا باید کد‌های سمت سرور را بنویسیم. برای این منظور باید ابتدا مقادیری را که دیتاتیبل برای ما ارسال میکند، از ریکوئست دریافت کنیم.
6- کل دیتایی که دیتا تیبل برای ما میفرستد، به مدل زیر خلاصه میشود:
public class FiltersFromRequestDataTable
{
public string length { get; set; }
public string start { get; set; }
public string sortColumn { get; set; }
public string sortColumnDirection { get; set; }
public string sortColumnIndex { get; set; }
public string draw { get; set; }
public string searchValue { get; set; }
public int pageSize { get; set; }
public int skip { get; set; }
} * (من از razor page استفاده میکنم؛ ولی مسلما در controller هم به همین شکل و راحت‌تر خواهد بود)
7- سپس داده‌های ارسال شده‌ی توسط دیتاتیبل، به سمت سرور را با استفاده از متد زیر دریافت میکنیم:
public static void GetDataFromRequest(this HttpRequest Request, out FiltersFromRequestDataTable filtersFromRequest)
{
//TODO: Make Strings Safe String
filtersFromRequest = new();
filtersFromRequest.draw = Request.Form["draw"].FirstOrDefault();
filtersFromRequest.start = Request.Form["start"].FirstOrDefault();
filtersFromRequest.length = Request.Form["length"].FirstOrDefault();
filtersFromRequest.sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
filtersFromRequest.sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
filtersFromRequest.searchValue = Request.Form["search[value]"].FirstOrDefault();
filtersFromRequest.pageSize = filtersFromRequest.length != null ? Convert.ToInt32(filtersFromRequest.length) : 0;
filtersFromRequest.skip = filtersFromRequest.start != null ? Convert.ToInt32(filtersFromRequest.start) : 0;
filtersFromRequest.sortColumnIndex = Request.Form["order[0][column]"].FirstOrDefault();
filtersFromRequest.searchValue = filtersFromRequest.searchValue?.ToLower();
} Request.GetDataFromRequest(out FiltersFromRequestDataTable filtersFromRequest);
9- با استفاده از متد زیر، مقادیر مورد نیاز دیتاتیبل را به آن ارسال میکنیم:
public static PaginationDataTableResult<T> ToDataTableJs<T>(this IEnumerable<T> source, FiltersFromRequestDataTable filtersFromRequest)
{
int recordsTotal = source.Count();
CofingPaging(ref filtersFromRequest, recordsTotal);
var result = new PaginationDataTableResult<T>()
{
draw = filtersFromRequest.draw,
recordsFiltered = recordsTotal,
recordsTotal = recordsTotal,
data = source.OrderByIndex(filtersFromRequest).Skip(filtersFromRequest.skip).Take(filtersFromRequest.pageSize).ToList()
};
return result;
}
private static void CofingPaging(ref FiltersFromRequestDataTable filtersFromRequest, int recordsTotal)
{
if (filtersFromRequest.pageSize == -1)
{
filtersFromRequest.pageSize = recordsTotal;
filtersFromRequest.skip = 0;
}
} private static IEnumerable<T> OrderByIndex<T>(this IEnumerable<T> source, FiltersFromRequestDataTable filtersFromRequest)
{
var props = typeof(T).GetProperties();
string propertyName = "";
for (int i = 0; i < props.Length; i++)
{
if (i.ToString() == filtersFromRequest.sortColumnIndex)
propertyName = props[i].Name;
}
System.Reflection.PropertyInfo propByName = typeof(T).GetProperty(propertyName);
if (propByName is not null)
{
if (filtersFromRequest.sortColumnDirection == "desc")
source = source.OrderByDescending(x => propByName.GetValue(x, null));
else
source = source.OrderBy(x => propByName.GetValue(x, null));
}
return source;
} 10- نحوه استفاده در هندلر یا اکشن:
var result = query.ToDataTableJs(filtersFromRequest); return new JsonResult(result);
- برای سرچ هم در columnها هم میتوانید به شکل زیر عمل کنید.
ابتدا دو متد زیر را به یک کلاس static اضافه کنید:
public static IEnumerable<TSource> WhereSearchValue<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate)
{
return source.Where(predicate);
}
public static bool ContainsSearchValue(this string source, string toCheck)
{
return source != null && toCheck != null && source.IndexOf(toCheck, StringComparison.OrdinalIgnoreCase) >= 0;
} if (!string.IsNullOrEmpty(filtersFromRequest.searchValue)) query = query.WhereSearchValue(x => x.title.ContainsSearchValue(filtersFromRequest.searchValue) || x.id.ToString().ContainsSearchValue(filtersFromRequest.searchValue)).AsQueryable();
کد کامل هندلر یا action (که ترکیب کد‌های بالا هستش):
public JsonResult OnPostList()
{
Request.GetDataFromRequest(out FiltersFromRequestDataTable filtersFromRequest);
var query = _Repo.GetQueryable().Select(x => new VmAdminList()
{
title = x.Title,
}
);
if (!string.IsNullOrEmpty(filtersFromRequest.searchValue))
query = query.WhereSearchValue(x => x.title.ContainsSearchValue(filtersFromRequest.searchValue) || x.id.ToString().ContainsSearchValue(filtersFromRequest.searchValue)).AsQueryable();
var result = query.ToDataTableJs(filtersFromRequest);
return new JsonResult(result);
} چند نکته:
1- ممکن‌است که بخواهید یکسری فیلتر را بجز مقادیر پیش فرض به سمت سرور ارسال کنید. برای اینکار کد زیر را به قسمت Ajax فرانت‌اند اضافه کنید:
data: function (d) {
d.parentId = parentID;
d.StartDateTime= StartDateTime;
}, if (!int.TryParse(Request.Form["parentId"].FirstOrDefault(), out int parentId))
throw new NullReferenceException(); dataSrc: function (json) {
$("#count").val(json.data.length);
var sum = 0;
json.data.forEach(function (item) {
if (!isNullOrEmpty(item.credit))
sum += parseInt(item.credit);
})
$("#sum").val(separate(sum));
return json.data;
}
تا به اینجا کار کاملا تمام شده؛ ولی من برای داینامیک کردن schema و columnها هم کلاسی را نوشته‌ام که فکر میکنم کار را راحت‌تر کند. چون شما برای تعداد ستون‌ها باید یک آبجکت را به شکل زیر تعریف کنید:
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
] public class JsDataTblGeneretaor<T>
{
public readonly DataTableSchemaResult DataTableSchemaResult = new();
public JsDataTblGeneretaor<T> CreateTableSchema()
{
var props = typeof(T).GetProperties();
foreach (var prop in props)
{
DataTableSchemaResult.SchemaResult.Add(new()
{
data = prop.Name,
sortable = (prop.PropertyType == typeof(int)) || (prop.PropertyType == typeof(bool)) || (prop.PropertyType == typeof(DateTime)),
width = "",
visible = (prop.PropertyType != typeof(DateTime))
});
}
return this;
}
public JsDataTblGeneretaor<T> CreateTableColumns()
{
var props = typeof(T).GetProperties();
CustomAttributeData displayAttribute;
foreach (var prop in props)
{
string displayName = prop.Name;
displayAttribute = prop.CustomAttributes.FirstOrDefault(x => x.AttributeType.Name == "DisplayAttribute");
if (displayAttribute != null)
{
displayName = displayAttribute.NamedArguments.FirstOrDefault().TypedValue.Value.ToString();
}
DataTableSchemaResult.Colums.Add(displayName);
}
return this;
}
public JsDataTblGeneretaor<T> AddCustomSchema(string data, bool? sortable = null, bool? visible = null, string width = null, string className = null)
{
if (DataTableSchemaResult.SchemaResult == null || !DataTableSchemaResult.SchemaResult.Any())
return this;
foreach (var item in DataTableSchemaResult.SchemaResult.Where(x => x.data == data))
{
if (sortable != null)
item.sortable = sortable.Value;
if (visible != null)
item.visible = visible.Value;
if (width != null)
item.width = width;
if (className != null)
item.className = className;
}
return this;
}
public JsDataTblGeneretaor<T> SerializeSchema()
{
if (DataTableSchemaResult.SchemaResult == null || !DataTableSchemaResult.SchemaResult.Any())
return this;
DataTableSchemaResult.SerializedSchemaResult = JsonSerializer.Serialize(DataTableSchemaResult.SchemaResult);
return this;
}
}
public class DataTableSchema
{
public string data { get; set; }
public bool sortable { get; set; }
public string width { get; set; }
public bool visible { get; set; }
public string className { get; set; }
}
public class DataTableSchemaResult
{
public readonly List<DataTableSchema> SchemaResult = new();
public readonly List<string> Colums = new();
public string SerializedSchemaResult = "";
} متد CreateTableColumns خیلی ساده هست و فقط یک لیست از استرینگ‌ها را برمیگرداند.
SerializeSchema هم که لیست آبجکت‌های مورد نیاز دیتاتیبل را سریالایز میکند.
نحوه استفاده:
در متد آغازین برنامه باید این کلاس را صدا بزنید و با هر روشی که دوست دارید، به view یا razor page ارسال کنید:
public void OnGet()
{
//Create Data Table Js Schema and Columns Dynamicly
JsDataTblGeneretaor<yourVM> tblGeneretaor = new();
DataTableSchemaResult = tblGeneretaor.CreateTableColumns().CreateTableSchema().SerializeSchema().DataTableSchemaResult;
}
نحوه سفارشی سازی:
.AddCustomSchema("yourProperty",visible:false) var scheme = JSON.parse('@Html.Raw(Model.DataTableSchemaResult.SerializedSchemaResult)') نحوه ساخت ستون‌ها در view:
@foreach (var col in Model.DataTableSchemaResult.Colums)
{
<th>@col</th>
} 
