Skip to content

1. Getting Started

Emrah KONDUR edited this page Nov 26, 2021 · 5 revisions

Installation

Install the DatatableJS packages from nuget,

PM> Install-Package DatatableJS

Then add datatables jquery script link to layout file after jquery scripts,

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

To format DateTime columns also need to add moment scripts,

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>

Basic Configuration

Define using DatatableJS in view or web config global for all views.

@using DatatableJS;

@(Html.JS().Datatable<Person>()
    .Name("PersonGrid")
    .Columns(cols =>
    {
        cols.Field(a => a.Id).Visible(false);
        cols.Field(a => a.Name).Title("First Name");
        cols.Field(a => a.Age).Title("Age");
    })
    .URL(Url.Action("GetDataResult"), "POST")
    .ServerSide(true)
    .Render()
)

Execute data server side with ToDataResult(request) method simply or manipulate your data and return DataResult<T> object includes data.

using DatatableJS.Data;

public JsonResult GetDataResult(DataRequest request)
{
    DataResult<Person> result = ctx.People.ToDataResult(request);
    return Json(result);
}

DataRequest ojbect includes datatable parameters like start, length, columns...

Clone this wiki locally