-> Model
using System;
namespace jQueryDatatableServerSideNetCore.Models.DatabaseModels
{
public class TestRegister
{
public int Id { get; set; }
public string Name { get; set; }
public string FirstSurname { get; set; }
public string SecondSurname { get; set; }
public string Street { get; set; }
public string Phone { get; set; }
public string ZipCode { get; set; }
public string Country { get; set; }
public string Notes { get; set; }
public DateTime CreationDate { get; set; }
}
}
///////////////////////////////////////////////////
->index.cshtml
@model IEnumerable<jQueryDatatableServerSideNetCore.Models.DatabaseModels.TestRegister>
@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-md-12">
<table id="test-registers" class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.FirstSurname)
</th>
<th>
@Html.DisplayNameFor(model => model.SecondSurname)
</th>
<th>
@Html.DisplayNameFor(model => model.Street)
</th>
<th>
@Html.DisplayNameFor(model => model.Phone)
</th>
<th>
@Html.DisplayNameFor(model => model.ZipCode)
</th>
<th>
@Html.DisplayNameFor(model => model.Country)
</th>
<th>
@Html.DisplayNameFor(model => model.Notes)
</th>
<th>
@Html.DisplayNameFor(model => model.CreationDate)
</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
@section Styles{
<link rel="stylesheet" href="~/lib/datatables/css/dataTables.bootstrap4.min.css" asp-append-version="true" />
}
@section Scripts{
<script src="~/lib/momentjs/moment.min.js" asp-append-version="true"></script>
<script src="~/lib/datatables/js/jquery.dataTables.min.js" asp-append-version="true"></script>
<script src="~/lib/datetime-moment/datetime-moment.js" asp-append-version="true"></script>
<script src="~/lib/datatables/js/dataTables.bootstrap4.js" asp-append-version="true"></script>
<script src="~/js/app.js" asp-append-version="true"></script>
}
////////////////////////////////////////
-> app.js
$(document).ready(function () {
$.fn.dataTable.moment("DD/MM/YYYY HH:mm:ss");
$.fn.dataTable.moment("DD/MM/YYYY");
$("#test-registers").DataTable({
// Design Assets
stateSave: true,
autoWidth: true,
// ServerSide Setups
processing: true,
serverSide: true,
// Paging Setups
paging: true,
// Searching Setups
searching: { regex: true },
// Ajax Filter
ajax: {
url: "/TestRegisters/LoadTable",
type: "POST",
contentType: "application/json",
dataType: "json",
data: function (d) {
return JSON.stringify(d);
}
},
// Columns Setups
columns: [
{ data: "id" },
{ data: "name" },
{ data: "firstSurname" },
{ data: "secondSurname" },
{ data: "street" },
{ data: "phone" },
{ data: "zipCode" },
{ data: "country" },
{ data: "notes" },
{
data: "creationDate",
render: function (data, type, row) {
// If display or filter data is requested, format the date
if (type === "display" || type === "filter") {
return moment(data).format("ddd DD/MM/YYYY HH:mm:ss");
}
// Otherwise the data type requested (`type`) is type detection or
// sorting data, for which we want to use the raw date value, so just return
// that, unaltered
return data;
}
}
],
// Column Definitions
columnDefs: [
{ targets: "no-sort", orderable: false },
{ targets: "no-search", searchable: false },
{
targets: "trim",
render: function (data, type, full, meta) {
if (type === "display") {
data = strtrunc(data, 10);
}
return data;
}
},
{ targets: "date-type", type: "date-eu" }
]
});
});
function strtrunc(str, num) {
if (str.length > num) {
return str.slice(0, num) + "...";
}
else {
return str;
}
}
Yorumlar
Yorum Gönder