Click here to Skip to main content
15,886,753 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
HTML
@model MvcJqueryJtable.Models.EmpDetails
@{
    Layout = null;
}

<html>
<head>
    <title>jQuery DataTables/ASP.NET MVC Integration</title>
    <link href="~/Content/demo_table.css" rel="stylesheet" type="text/css" />
    <script src="~/Content/js/jquery-1.11.2.min.js"type="text/javascript"></script>
    <script src="~/Content/js/jQuery.dataTables.min.js"type="text/javascript"></script>
    <script src="~/Content/js/index.js " type="text/javascript"></script>
</head>
<body>



Index





ID @Html.DisplayNameFor(model => model.Empname) Employee Salary Employee Department Name
@Html.DisplayNameFor(model => model.Empname) Employee Name Employee Salary Employee Department Name



<script type="text/javascript">
$(document).ready(function () {

$('#myDataTable').dataTable({

"sAjaxSource": "Home/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true,

},
{ "sName": "Empname" },
{ "sName": "EmpSalary" },
{ "sName": "dname" }
]
});
});
</script>
</body>

</html>
C#
controler side
using MvcJqueryJtable.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MvcJqueryJtable.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult AjaxHandler(jQueryDataTableParamModel param)
        {
            

            DataOperationDataContext dc = new DataOperationDataContext();
         
            
            var emplist = new List<EmpDetails>();
            var employess = from emps in dc.tble_Emps
                            join depts in dc.tble_depts
                            on emps.deptid equals depts.id
                            select new EmpDetails
                            {
                                Id = emps.EmpId,
                                Empname = emps.EmpName,
                                EmpSalary = emps.EmpSalary,
                               dname = depts.Dname,
                            };

            emplist = employess.ToList();
            var allCompanies = emplist;
            IEnumerable<EmpDetails> filteredCompanies;
            //Check whether the companies should be filtered by keyword
            if (!string.IsNullOrEmpty(param.sSearch))
            {
                //Used if particulare columns are filtered 
                var nameFilter = Convert.ToString(Request["sSearch_1"]);
                

                //Optionally check whether the columns are searchable at all 
                var isNameSearchable = Convert.ToBoolean(Request["bSearchable_1"]);
                

                filteredCompanies = emplist
                   .Where(c => isNameSearchable && c.Empname.ToLower().Contains(param.sSearch.ToLower()));
                               
            }
            else
            {
                filteredCompanies = allCompanies;
            }

            var isNameSortable = Convert.ToBoolean(Request["bSortable_1"]);
           
            var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
            Func<EmpDetails, string> orderingFunction = (c => sortColumnIndex == 1 && isNameSortable ? c.Empname:"");
                                                      
                                                           
            var sortDirection = Request["sSortDir_0"]; // asc or desc
            if (sortDirection == "asc")
                filteredCompanies = filteredCompanies.OrderBy(orderingFunction);
            else
                filteredCompanies = filteredCompanies.OrderByDescending(orderingFunction);

            var displayedCompanies = filteredCompanies.Skip(param.iDisplayStart).Take(param.iDisplayLength);
            return Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = 97,
                iTotalDisplayRecords = 4,
                aaData = emplist
            },
                            JsonRequestBehavior.AllowGet);
        }

    }
}
Posted
Updated 24-Feb-15 17:09pm
v2
Comments
ZurdoDev 24-Feb-15 13:13pm    
What is your question?
Member 11468452 24-Feb-15 13:26pm    
how we can integrate Jquery datatable in asp.net Mvc4 cilent side?
Actually I am a Beginer,
ZurdoDev 24-Feb-15 13:30pm    
That's a very broad question. I suggest you google for some examples and go from there.
Member 11468452 24-Feb-15 13:32pm    
ohh...thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900