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="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
        
        //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="//cdn.datatables.net/tabletools/2.2.1/js/dataTables.tableTools.min.js"></script>
        <link rel="stylesheet" href="//cdn.datatables.net/tabletools/2.2.1/css/dataTables.tableTools.css" />
        
        //And these if you want to use column visibility
        <link rel="stylesheet" href="//cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css" />
        <script type="text/javascript" src="//cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></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)
    

Voila!

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

See table with Language settings applied