---
title: "How to Use Datatable With pagination and filter in mvc."  
description: "How to Use Datatable With pagination and filter in mvc."  
author: "Anonymous User"  
published: 2015-09-30  
updated: 2015-09-30  
canonical: https://www.mindstick.com/forum/33484/how-to-use-datatable-with-pagination-and-filter-in-mvc  
category: "asp.net mvc"  
tags: ["c#", "jquery", "html", "mvc4"]  
reading_time: 3 minutes  

---

# How to Use Datatable With pagination and filter in mvc.

every one Please Help me How to use [datatable](https://www.mindstick.com/blog/195/datatable-in-ado-dot-net) with [pagination](https://www.mindstick.com/blog/265/pagination-in-php) and [filter](https://www.mindstick.com/forum/1176/filter-in-a-xml-file-in-c-sharp) in mvc.

## Replies

### Reply by Anonymous User

![How to Use Datatable With pagination and filter in mvc.](https://www.mindstick.com/mindstickforums/d02290df-a454-4458-b1b1-f118f9f9e47a/images/833f1f10-dede-40b6-8691-a500318d4968.png)

## Jquery Code serverside

```
var oTable = $('#datatable').DataTable({    "serverSide": true,     "responsive": true,    "pageLength": 50,    "pagingType": "full_numbers",    "ajax": {        "type": "POST",        "url": '/Home/DataHandler',        "contentType": 'application/json; charset=utf-8',        'data': function (data) {            return data = JSON.stringify(data);        }    },     // "dom": 'frtiS',   // "scrollY": 500,   // "scrollX": false,   // "scrollCollapse": false,   // "scroller": {   // loadingIndicator: false   //},    "processing": true,    "paging": true,    "deferRender": true,    "columns": [       //{       //    data: "UserId", "bSearchable": false,       //    bSortable: false,       //    mRender: function (data, type, full) {       //        return ' <input type="checkbox"  value="' + data + '"" class="checkbox editor-active">';       //    }       //},   //{ "data": "UserId" },   { "data": "UserName" },   { "data": "EmailId" },   { "data": "Address" },   { "data": "PhoneNumber" },    {        data: "UserId", "bSearchable": false,        bSortable: false,        mRender: function (data, type, full) {            return '<a href="Home/Edit/' + data + '"" class="openDialog btn btn-default btn-warning"  >Edit</a> &nbsp;&nbsp;'                + '<a href="Home/Delete/' + data + '"" Class="deleteDialog btn btn-default btn-danger " >Delete</a>&nbsp;&nbsp;'            + ' <input type="checkbox"  value="' + data + '"" class="checkbox editor-active">';        }    }    ],    "order": [1, "asc"],});
```

## Filter class

```
 public class ResultSet    {        public List<UserModel> GetResult(string search, string sortOrder, int start, int length, List<User> dtResult, List<string> columnFilters)        {            return FilterResult(search, dtResult, columnFilters).SortBy(sortOrder).Skip(start).Take(length).ToList();        }        public int Count(string search, List<User> dtResult, List<string> columnFilters)        {            return FilterResult(search, dtResult, columnFilters).Count();        }        private IQueryable<UserModel> FilterResult(string search, List<User> dtResult, List<string> columnFilters)        {            IQueryable<User> results = dtResult.AsQueryable();            var res = results.Where(p => (search == null || (p.UserName != null && p.UserName.ToLower().Contains(search.ToLower()) || p.EmailId != null && p.EmailId.ToLower().Contains(search.ToLower())                || p.PhoneNumber != null && p.PhoneNumber.ToLower().Contains(search.ToLower())                || p.UserDetail.FirstOrDefault().UserAddress != null && p.UserDetail.FirstOrDefault().UserAddress.ToLower().Contains(search.ToLower()))              )).Select(x => new UserModel { UserId = x.UserId, UserName = x.UserName, PhoneNumber = x.PhoneNumber, EmailId = x.EmailId, Address = x.UserDetail.FirstOrDefault().UserAddress });            return res;        }            }Parameter Class public class jQueryDataTableParamModel    {                  public string sEcho { get; set; }               public string sSearch { get; set; }        public int iDisplayLength { get; set; }              public int iDisplayStart { get; set; }               public int iColumns { get; set; }               public int iSortingCols { get; set; }                public string sColumns { get; set; }    }
```

## Controller Action

```
  public JsonResult DataHandler(CodeFirst.Models.DataTableViewModel.DTParameters param)        {            try            {                var dtsource = new List<User>();                dtsource = db.Users.Include(x => x.UserDetail).ToList();                List<String> columnSearch = new List<string>();                if (param != null && param.Columns != null)                {                    foreach (var col in param.Columns)                    {                        columnSearch.Add(col.Search.Value);                    }                }                List<UserModel> data = new ResultSet().GetResult(param.Search.Value,                                       param.SortOrder, param.Start, param.Length,                                       dtsource, columnSearch);                int count = new ResultSet().Count(param.Search.Value, dtsource, columnSearch);                CodeFirst.Models.DataTableViewModel.DTResult<UserModel> result =                                      new CodeFirst.Models.DataTableViewModel.DTResult<UserModel>                {                    draw = param.Draw,                    data = data,                    recordsFiltered = count,                    recordsTotal = count                };                return Json(result, JsonRequestBehavior.AllowGet);            }            catch (Exception ex)            {                return Json(new { error = ex.Message }, JsonRequestBehavior.AllowGet);            }        }HTML Binding<table class="table  " id="datatable" style="margin-top: 10px">            <thead id="header">                <tr>                    <th>User Name</th>                    <th>EmailId</th>                    <th>Address</th>                    <th>Phone Number</th>                    <th style="width: 160px">Action                        <input id="checkAll" type="checkbox" />                    </th>                </tr>            </thead>            <tbody>            </tbody>        </table>
```


---

Original Source: https://www.mindstick.com/forum/33484/how-to-use-datatable-with-pagination-and-filter-in-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.