jQuery DataTables Summary (edit)
http://www.ville-pont-eveque.fr/tools/library/DataTables/examples/data_sources/js_array.html
https://manhng.com/blog/scrud/
https://manhng.com/blog/jquery-datatables-event-prexhr/
https://manhng.com/blog/datatables-editable/
https://manhng.com/blog/jquery-datatables/
https://manhng.com/blog/jquery-datatables-ajax/
https://manhng.com/blog/jquery-datatables-server-side-stored-procedure/
https://manhng.com/blog/jquery-datatables-in-net-core/
https://manhng.com/blog/reactjs/
https://manhng.com/blog/jquery-datatables-server-side-processing/
https://manhng.com/archive/jquery-datatables-server-side-processing/
https://manhng.com/blog/datatables-ajax/
https://manhng.com/blog/mvc-best-practices/
https://manhng.com/blog/jquery-usage/
https://manhng.com/blog/export-excel-js/
https://manhng.com/blog/systems-architecture/
CRUD Automatically Add Table TD, TR
https://www.codemag.com/Article/1511031/CRUD-in-HTML-JavaScript-and-jQuery
Realtime jQuery Datatable with Pusher
https://github.com/christiannwamba/pusher-realtime-jquery-datatable/
https://material.io/components/data-tables
https://www.c-sharpcorner.com/article/create-datatable-in-jquery/
https://techgrafitti.wordpress.com/2014/11/18/jquery-datatables-empty-table-custom-text-clear-datatable-search-columns/
Getting Started
https://www.aspsnippets.com/Articles/Simple-jQuery-DataTables-Tutorial-with-example-in-ASPNet.aspx
https://www.c-sharpcorner.com/article/display-data-in-Asp-Net-using-jquery-datatables-plugin/
https://www.c-sharpcorner.com/article/using-jquery-datatables-grid-with-asp-net-core-mvc/
https://www.c-sharpcorner.com/article/using-datatables-grid-with-asp-net-mvc/
Source (Server)
DTO Item class
public class JsonData
{
public int draw { get; set; }
public int recordsFiltered { get; set; }
public int recordsTotal { get; set; }
public List<Item> data { get; set; }
public JsonData()
{
draw = 1;
recordsFiltered = 0;
recordsTotal = 0;
data = new List<Item>();
}
}
XML Data ~ Array or List of DTO (Item class)
<Data><Items><Item><UserType>{0}</UserType><DocType>{1}</DocType><OrderCode>{2}</OrderCode><Phase>{3}</Phase><Namespace>{4}</Namespace><Type>{5}</Type><Method>{6}</Method><MethodTitle>{7}</MethodTitle><Mean>{8}</Mean><Dtn>{9}</Dtn></Item></Items></Data>
Source (Client)
https://manhng.com/blog/jquery-datatables-event-prexhr/
https://manhng.com/blog/jquery-datatables-ajax/
https://www.c-sharpcorner.com/article/using-jquery-datatables-grid-with-asp-net-core-mvc/
Html
<body>
<div class="datatable-statistic">
<table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>UserType</th>
<th>DocType</th>
<th>OrderCode</th>
<th>Phase</th>
<th>Namespace</th>
<th>Type</th>
<th>Method</th>
<th>MethodTitle</th>
<th>Mean</th>
<th>Execution time</th>
</tr>
</thead>
</table>
</div>
</body>
CSS & CDN
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<style>
.datatable-statistic {
margin: 10px;
}
#demoGrid td:nth-child(8),
#demoGrid th:nth-child(8) {
font-weight: bold;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js"></script>
JavaScript
<script>
$(document).ready(function () {
var table = $("#demoGrid").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"pageLength": 20,
"ajax": {
"url": "/Home/LoadData",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [1],
"searchable": false,
"orderable": false
},
{
"targets": [2],
"searchable": true,
"orderable": true
},
{
"targets": [3],
"searchable": true,
"orderable": true
},
{
"targets": [4],
"searchable": true,
"orderable": true
},
{
"targets": [5],
"searchable": true,
"orderable": true
},
{
"targets": [6],
"searchable": true,
"orderable": true
},
{
"targets": [7],
"searchable": true,
"orderable": true
},
{
"targets": [8],
"searchable": true,
"orderable": true
},
{
"targets": [9],
"searchable": true,
"orderable": true
}],
"columns": [
{ "data": "UserType", "name": "UserType", "autoWidth": true },
{ "data": "DocType", "name": "DocType", "autoWidth": true },
{ "data": "OrderCode", "title": "OrderCode", "name": "OrderCode", "autoWidth": true },
{ "data": "Phase", "name": "Phase", "autoWidth": true },
{ "data": "Namespace", "name": "Namespace", "autoWidth": true },
{ "data": "Type", "name": "Type", "autoWidth": true },
{ "data": "Method", "name": "Method", "autoWidth": true },
{ "data": "MethodTitle", "name": "MethodTitle", "title": "MethodTitle", "autoWidth": true },
{ "data": "Mean", "name": "Mean", "title": "Mean", "autoWidth": true },
{ "data": "Dtn", "name": "Dtn", "title": "Execution time", "autoWidth": true }
]
});
table.on('preXhr.dt', function (e, settings, data) {
//Before send Ajax
console.log('preXhr.dt');
});
table.on('xhr.dt', function (e, settings, json) {
//After send Ajax
console.log('xhr.dt');
});
table.on('xhr', function () {
var json = table.ajax.json();
console.log('xhr');
console.log(json.data.length + ' row(s) were loaded');
});
});
</script>
