Introduction

1. Part 1: Implement jQuery Datatable (Basic initialization) in ASP.NET MVC application.
2. Part 2: jQuery Datatable server side pagination and sorting in ASP.NET MVC
3. Part 3: Implement custom multicolumn server-side filtering in jQuery dataTables
4. Full CRUD operation using datatables in ASP.NET MVC
5. Next article coming soon...

Just follow the following steps in order implement custom multicolumn server-side filtering in jQuery dataTables

Step-1: Create New Project.

Step-2: Add a Database.

Step-3: Create a table.

In this example, I have used 1 table as below

Step-4: Add Entity Data Model.

Step-5: Create a Controller.

Step-6: Add new action into the controller to get the view where we will implement jQuery DataTable with server-side paging and sorting.

public ActionResult Index()
{
    return View();
}

Step-7: Add view for the action (here "Index") & design.

@{
    ViewBag.Title = "Index";
}

<h2>Part 3: Custom multicolumn server-side filtering in jQuery DataTables.</h2>
<div style="width:90%; margin:0 auto">
    @* Search Area *@
    <div style="background-color:#f5f5f5; padding:20px">
        <h2>Search Panel</h2>
        <table>
            <tbody>
                <tr>
                    <td>Employee Name</td>
                    <td><input type="text" id="txtEmployeeName" /></td>
                    <td>Country</td>
                    <td>
                        <select id="ddCountry" style="width:200px">
                            <option value="">All Country</option>
                            <option value="USA">USA</option>
                            <option value="Poland">Poland</option>
                            <option value="Finland">Finland</option>
                        </select>
                        @* Here I have made this select box with some static data for make this example simpler. 
                        You can fill it from database data *@
                    </td>
                    <td>
                        <input type="button" value="Search" id="btnSearch" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    @* jQuery DataTables *@
    <div>
        <table id="myTable" class="table table-responsive table-striped">
            <thead>
                <tr>
                    <th>Employee Name</th>
                    <th>Company</th>
                    <th>Phone</th>
                    <th>Country</th>
                    <th>City</th>
                    <th>Postal Code</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@* jQuery DataTables css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* jQuery *@
@section Scripts{
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
    <script>
        $(document).ready(function () {

            //jQuery DataTables initialization 
            $('#myTable').DataTable({
                "processing": true, // for show processing bar
                "serverSide": true, // for process on server side
                "orderMulti": false, // for disable multi column order
                "dom": '<"top"i>rt<"bottom"lp><"clear">', // for hide default global search box // little confusion? don't worry I explained in the tutorial website
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns" : [
                        { "data": "ContactName", "name": "ContactName", "autoWidth": true }, //index 0
                        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true }, //index 1
                        { "data": "Phone", "name": "Phone", "autoWidth": true },             //index 2
                        { "data": "Country", "name": "Country", "autoWidth": true },         //index 3
                        { "data": "City", "name": "City", "autoWidth": true },               //index 4
                        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true },   //index 5
                    ]
            });

            //Apply Custom search on jQuery DataTables here
            oTable = $('#myTable').DataTable();
            $('#btnSearch').click(function () {
                //Apply search for Employee Name // DataTable column index 0
                oTable.columns(0).search($('#txtEmployeeName').val().trim());
                //Apply search for Country // DataTable column index 3
                oTable.columns(3).search($('#ddCountry').val().trim());
                //hit search on server
                oTable.draw();
            });
        });
    </script>
}

"dom": '<"top"i>rt<"bottom"lp><"clear">'

About "dom"

This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page.

Confusion ? Don't worry. Please check the below image

Step-8: Add reference of System.Linq.Dynamic

Step-9: Add another action (here "LoadData") for fetch data from the database and implement logic for server-side paging, sorting and filtering.

[HttpPost]
        public ActionResult LoadData()
        {
            //jQuery DataTables Param
            var draw = Request.Form.GetValues("draw").FirstOrDefault();
            //Find paging info
            var start = Request.Form.GetValues("start").FirstOrDefault();
            var length = Request.Form.GetValues("length").FirstOrDefault();
            //Find order columns info
            var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() 
                                    + "][name]").FirstOrDefault();
            var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
            //find search columns info
            var contactName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault(); 
            var country = Request.Form.GetValues("columns[3][search][value]").FirstOrDefault();

            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt16(start) : 0;
            int recordsTotal = 0;


            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                // dc.Configuration.LazyLoadingEnabled = false; // if your table is relational, contain foreign key
                var v = (from a in dc.Customers select a);

                //SEARCHING...
                if (!string.IsNullOrEmpty(contactName))
                {
                    v = v.Where(a=>a.ContactName.Contains(contactName));
                }
                if (!string.IsNullOrEmpty(country))
                {
                    v = v.Where(a => a.Country == country);
                }
                //SORTING...  (For sorting we need to add a reference System.Linq.Dynamic)
                if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
                {
                    v = v.OrderBy(sortColumn + " " + sortColumnDir);
                }

                recordsTotal = v.Count();
                var data = v.Skip(skip).Take(pageSize).ToList();
                return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, 
                    JsonRequestBehavior.AllowGet);

            }
        }

 //find search columns info
var contactName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault(); 
var country = Request.Form.GetValues("columns[3][search][value]").FirstOrDefault();

//SEARCHING...
if (!string.IsNullOrEmpty(contactName))
{
    v = v.Where(a=>a.ContactName.Contains(contactName));
}
if (!string.IsNullOrEmpty(country))
{
    v = v.Where(a => a.Country == country);
}

Step-10: Run Application.