当我试图在Mvc4中集成Jquery数据表时，我遇到了一些困难 [英] I Faced Some Difficulties When I Am Trying To Integrate Jquery Datatable In Mvc4
本文介绍了当我试图在Mvc4中集成Jquery数据表时，我遇到了一些困难的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
@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>
索引
| ID | @ Html.DisplayNameFor（model => model.Empname） | 员工薪水 | 员工部门名称 |
|---|---|---|---|
| @ Html.DisplayNameFor（model => model.Empname） | 员工姓名 | 员工薪水 | 员工部门名称 |
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：是的，
aoColumns：[
{
sName：Id，
bSearchable：true，
bSortable：true，
}，
{sName：Empname}，
{sName：EmpSalary}，
{ sName：dname}
]
}）;
}）;
< / script> ;
< / body>
< / html>
<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>
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);
}
}
}
推荐答案
（document）.ready（function （）{
(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>
('#myDataTable').dataTable({
"sAjaxSource": "Home/AjaxHandler",
"bProcessing": true,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true,
},
{ "sName": "Empname" },
{ "sName": "EmpSalary" },
{ "sName": "dname" }
]
});
});
</script>
</body>
</html>
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);
}
}
}
这篇关于当我试图在Mvc4中集成Jquery数据表时，我遇到了一些困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
