Я использую 1.10 Jquery Datatables и для шаблонов я использую Underscore JS.
Вот мой код для загрузки со стороны сервера.
Поместите этот шаблон и таблицу в ваш HTML-код.
<table class="table table-bordered table-condensed" id="tblAccounts"></table>
<script type="text/template" id="tmpl_Grid">
<td><%= Id %></td>
<td><%= Amount %></td>
<td><%= Date %></td>
<td><%= Type %></td>
</script>
Затем этот метод для js загружает данные со стороны сервера.
function Load() {
var tmpl = _.template($('#tmpl_Grid').html());
$('#tblAccounts').DataTable({
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"paging": true,
"info": true,
"ordering": true,
"search": true,
"processing": true,
"serverSide": true,
"destroy": true,
"ajax": {
"url": "/Accounts/LoadList",
"type": "POST",
"data": function (d) {
d.startDate = $("#txtStartDate").val();
d.endDate = $("#txtEndDate").val();
}
},
"columns": [
{ "data": null, "title": "ID", "className": "", "orderable": false, "searchable": false },
{ "data": null, "title": "AMOUNT", "className": "", "orderable": false, "searchable": false },
{ "data": null, "title": "DATE", "className": "", "orderable": false, "searchable": false },
{ "data": null, "title": "TYPE", "className": "", "orderable": false, "searchable": false }
],
"order": [[0, "asc"]],
"rowCallback": function (row, data) {
$(row).html(tmpl(data));
},
"initComplete": function (settings, json) {
}
});
}
Вот код для контроллера.Я использую EntityFrameword для обработки базы данных, вы можете использовать свой собственный метод или технику.
[HttpPost]
public async Task<JsonResult> LoadList(string startDate, string endDate)
{
var search = Request.Form["search[value]"] + "";
var totalCount = 0;
var fList = _context.Expenses.Include(x => x.AccountType).AsQueryable();
if (!string.IsNullOrEmpty(search))
{
fList = fList.Where(x => x.Description.ToLower().Trim().Contains(search.ToLower().Trim()));
}
var list = await fList.OrderByDescending(x => x.Id).Skip(start).Take(length).Select(x => new
{
x.Id,
x.Amount,
Date = x.Date != null ? x.Date.Value.ToString("dd-MMM-yyyy") : "",
Type = x.AccountTypeId != null ? x.AccountType.Name : "",
x.Description,
x.BillAmount,
x.Payment,
x.AccountTypeId
}).ToListAsync();
if (list.Any())
{
totalCount = fList.Count();
}
var result = JObject.FromObject(new
{
draw,
recordsFiltered = totalCount,
recordsTotal = totalCount,
data = list
});
return result;
}