The DataTables.AspnetCore.Mvc provides htmlHelper wrapper for jquery datatables.
The easiest way to install is by using NuGet. The current version is writing in netstandard2.0
Refer to the official dataTables.net documentation for details on options.
DataTables has only one library dependency jQuery
Add a link on datatables css and javascript files on your page
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/sl-1.2.3/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/sl-1.2.3/datatables.min.js"></script>Note that additional packages can be required for extensions.
Add a using on the library in the _ViewImports.cshtml file.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using DataTables.AspNetCore.MvcThe easy way to use it with your own tables is to call the htmlHelper with our id table.
@(Html.Ext().Grid<dynamic>().Name("example"))You can customize the table css class with the ClassName method
@(Html.Ext().Grid<dynamic>().Name("example")).ClassName("dataTable responsive")Layout and columns definition can be set with Dom and ColumnDefs method
@(Html.Ext().Grid<dynamic>().Name("example2")
.Dom("B<\"clear\">lfrtip")
.ColumnDefs(c =>
{
c.TargetAll().Searchable(false);
// Column 1 gives order for column 0
c.Targets(0).OrderData(1);
})
.PagingType(PagingType.Full_numbers)
)External datasource can be set with Datasource method. The datasource option use ajax method to define the source url.
@(Html.Ext().Grid<dynamic>().Name("example")
.DataSource(c =>
c.Ajax().Url("/data/arrays.json").Method("GET")
)
)If json source didn't match your header table it's required to define your columns as explain here
This sample map the columns with the json properties : name, position and office.
@(Html.Ext().Grid<dynamic>().Name("example")
.DataSource(c =>
c.Ajax().Url("/data/arrays.json").Method("GET")
)
.Columns(cols =>
{
cols.Add().Data("name");
cols.Add().Data("position");
cols.Add().Data("office");
})
)When dealing with thousands of data rows it can be helpfull to use the serverside configuration.
The following example map the datasource with a web api. Columns are defined regarding the Product properties class. By default the datasource mapping is based on JsonProperty attribute of property. If none is defined the property name is used. Use the Data method to modify the mapping. Javascript scripts can be added to modify the render of column.
@(Html.Ext().Grid<Product>().Name("example").RowId("id")
.Columns(cols =>
{
cols.Add(c => c.Name).Title("Name");
cols.Add(c => c.Office).Title("Office");
cols.Add(c => c.Position).Title("Position");
cols.Add(c => c.Salary).Visible(false).Title("Salary");
cols.Add(c => c.Created).Title("Date");
cols.Add(c => c.Id).Data("id").Title("").Render(() => "onRender").Click("onClick");
})
.ServerSide(true)
.DataSource(c =>
c.Ajax().Url("/api/value").Method("GET")
)
)
<script>
function onRender(data, type, row, meta) {
return '<button type="button" data-type="view" class="btn btn-sm btn-default"><i class="fa fa-lg fa-fw fa-search"></i></button> <button type="button" data-type="remove" class="btn btn-sm btn-danger"><i class="fa fa-lg fa-fw fa-trash"></i></button>';
}
function onClick(e) {
if (e.data.type == 'remove') {
console.log('remove clicked');
} else if (e.data.type == 'view') {
console.log('view clicked');
}
}
</script> public class Product
{
// JsonProperty not defined
public int Id { get; set; }
[JsonProperty(PropertyName = "name")]
public string Name { get; set; }
[JsonProperty(PropertyName = "position")]
public string Position { get; set; }
[JsonProperty(PropertyName = "office")]
public string Office { get; set; }
[JsonProperty(PropertyName = "salary")]
public string Salary { get; set; }
[JsonProperty(PropertyName = "created")]
public DateTime Created { get; set; }
}From server side, the request is processing using the helper class DataTableRequest and extension ToDataTablesResponse on collection.
[HttpGet()]
[Route("api/value")]
public IActionResult Get([DataTablesRequest] DataTablesRequest dataRequest)
{
IEnumerable<Product> products = Products.GetProducts();
int recordsTotal = products.Count();
int recordsFilterd = recordsTotal;
if (!string.IsNullOrEmpty(dataRequest.Search?.Value))
{
products = products.Where(e => e.Name.Contains(dataRequest.Search.Value));
recordsFilterd = products.Count();
}
products = products.Skip(dataRequest.Start).Take(dataRequest.Length);
return Json(products
.Select(e => new
{
Id = e.Id,
Name = e.Name,
Created = e.Created,
Salary = e.Salary,
Position = e.Position,
Office = e.Office
})
.ToDataTablesResponse(dataRequest, recordsTotal, recordsFilterd));
}Events are catch from client side with the Events method
@(Html.Ext().Grid<dynamic>().Name("example")
.Select(s => {})
.Events(e => { e.Select("onSelected").Deselect("onDeselected"); })
)
<script type="text/javascript">
function onSelected(e, dt, type, i) {
console.log("select " + type);
}
function onDeselected(e, dt, type, i) {
console.log("deselect " + type);
}
</script>The current library supports buttons and select extensions. Following sample enable the Select extension and catch select/deselect events
@(Html.Ext().Grid<dynamic>().Name("example")
.ColumnDefs(c =>
{
c.Targets(0).Orderable(false).ClassName("select-checkbox");
})
.Select(s => {
s.Blurable(true).Info(true);
})
.Events(e =>
{
e.Select("onSelected").Deselect("onDeselected");
}
)
) <table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>