Jquery DataTable in MVC

In the previous Posts I had shown how to use Jquery DataTable plugin in Asp.Net.

• jquery DataTable PlugIn in ASP.Net using C#
• jquery datatable row grouping plugin
• jQuery DataTables and ASP.NET Integration
• search jquery datatable from external textbox in asp.net
• Colspan in Jquery DataTables using C# in asp.net GridView
• Jquery DataTable in Asp.Net with server side Paging and Filtering
• Jquery DataTable in Asp.Net with server side Paging and Filtering (fast)

In this Post I will show how to populate Items in MVC with multi column search using Jquery DataTable.
To get the out put as shown below I used VS 2015, SQL server, Entity framework  and Jquery DataTable plugin.

OutPut :

After creating MVC project ADD jquery.datatables, jquery UI from nuget.
ADD ADO.Net Entity Model in the project.
Create Object for Entity Ex: ItemsDBEntities entities = new ItemsDBEntities();
ADD ActionResut Method as Items as shown below.

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

right click on the method just created(Items) and ADD View. Now replace the HTML text as below.

@{
    ViewBag.Title = "Items";
}
<h2>Items</h2>
<div>    
    <table id="tblItems">
        <thead>
            <tr>
                <th>Part Number</th>
                <th>Specification</th>
                <th>Description</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Part Number</th>
                <th>Specification</th>
                <th>Description</th>
            </tr>
        </tfoot>
    </table>

    @* jQuery DataTables css *@
    <link href="//code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/dataTables.jqueryui.css" rel="stylesheet" />

    @* jQuery *@

    @section Scripts{

        @*<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>*@
        <script src="~/Scripts/jquery-1.12.0.js"></script>
        <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
        <script src="~/Scripts/DataTables/dataTables.jqueryui.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#tblItems tfoot th').each(function () {
                    var title = $(this).text();
                    $(this).html('<input class="FClass" style="width:inherit;" type="text" id="' + title.replace(' ', '_') + '" placeholder="Search ' + title + '" />');
                });

                var table = $('#tblItems').DataTable({
                    "ordering": false,
                    "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
                    "pagingType": "full_numbers",
                    "scrollY": "350px",
                    "scrollX": true,
                    "ajax": {
                        "url": "/home/LoadData",
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columns": [
                        { "data": "PartNumber", "autoWidth": false },
                        { "data": "Specification", "autoWidth": true },
                        { "data": "ItemDescription", "autoWidth": true },
                    ]
                });

                table.columns().every(function () {
                    var that = this;
                    $('input', this.footer()).on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
            });

            $(document).ready(function () {
                $(".FClass").change(function () {
                    var values = "Part No : " + $("#PartNumber").val() + ", Spec : " + $("#Specification").val() + ", Desc : " + $("#Description").val();
                });
            });
        </script>
    }
</div>

Now ADD a Class in Models Folder as shown below.

public class ItemMasterModel
{
 public string PartNumber { get; set; }
 public string Specification { get; set; }
 public string Description { get; set; }  
 public DateTime CreatedDate { get; set; }  
}

Now in the HomeController ADD below ActionResult and related Method.

public ActionResult LoadData()
{
 var Items = GetItems("", "", "");
 return Json(new { data = Items }, JsonRequestBehavior.AllowGet);
}

private List GetItems(string PartNo, string Spec, string Desc)
{
 try
 {
  var Items = (from a in entities.ItemMasters
     .Where(x => x.ItemDescription.Contains(Desc) && x.Specification.Contains(Spec) && x.PartNumber.Contains(PartNo))     
      select new ItemMasterModel
      {
       PartNumber = a.PartNumber,
       Specification = a.Specification,
       ItemDescription = a.ItemDescription,
       CreatedDate = a.CreatedDate
      }).OrderByDescending(x => x.CreatedDate).ToList();

  ViewBag.Items = Items;
  return Items;
 }
 catch (Exception ex)
 {
  string Msg = ex.Message;
  return null;
 }
}