Fork me on GitHub

Grid example See also Faceted search example

Nuget install-package Mvc.JQuery.DataTables
Nuget install-package EmbeddedResourceVirtualPathProvider or Nuget install-package Mvc.JQuery.DataTables.Templates

Create a controller (see example)

public class SomeController : Controller 
      public ActionResult Index()
            var getDataUrl = Url.Action(nameof(HomeController.GetUsers));
            var vm = DataTablesHelper.DataTableVm<UserTableRowViewModel>("idForTableElement", getDataUrl);
            ... configure data table options  (see HomeController.cs)

            return View(vm);
    public DataTablesResult<UserTableRowViewModel> GetUsers(DataTablesParam dataTableParam)
        IQueryable<User> users = ... //take a queryable from your database...
        var userViews = users.Select(u => new UserTableRowViewModel(u)); //...transform it into a view object ...
        return DataTablesResult.Create(userViews, dataTableParam)  //...and return a DataTablesResult

and render the partial (see example)

        //include these scripts to use standard features
        <script type="text/javascript" src="//"></script>
        <link rel="stylesheet" href="//" />
        //These ones if you want to use the column filters
        <link rel="stylesheet" href="/Content/jquery-datatables-column-filter/media/js/jquery.dataTables.columnFilter.css" />
        <script type="text/javascript" src="/Content/jquery-datatables-column-filter/media/js/jquery.dataTables.columnFilter.js"></script>
        //And these if you want date time pickers in the filters
        <script type="text/javascript" src="/Content/jquery-datatables-column-filter/jquery-ui-timepicker-addon.js"></script>
        <link rel="stylesheet" href="/Content/jquery-datatables-column-filter/jquery-ui-timepicker-addon.css" />
        //and these if you want to use  TableTools (export buttons)
        <script type="text/javascript" src="//"></script>
        <link rel="stylesheet" href="//" />
        //And these if you want to use column visibility
        <link rel="stylesheet" href="//" />
        <script type="text/javascript" src="//"></script>
        var dataTablesConfigVm = dataTablesConfigVmHtml.DataTableVm("table-id", (HomeController h) => h.GetUsers(null))
        //set options on the config here, see example here

        @Html.Partial("DataTable", Model)


Custom placement for Position filter:
Custom placement for hidden Salary filter:
Id Full name from resource file E-Mail IsAdmin AHiddenColumn Salary Position Hired Number Thumb
Id Full name from resource file E-Mail IsAdmin AHiddenColumn Salary Position Hired Number Thumb
Loading data from server

Turn off language settings