前端效果图
服务段处理分页后数据,客户端呈现
jquery.DataTables下载地址
服务端代码:
// 异步 得到文章列表 Json
public ActionResult TableData()
{
// 文章类别
int classId = Convert.ToInt32(Request["ClassId"]);
// 开始记录 第几行
int iDisplayStart =Convert.ToInt32(Request["iDisplayStart"]);
// 单页显示记录数 显示多少行
int iDisplayLength =Convert.ToInt32(Request["iDisplayLength"]);
// 搜索关键字
//string sSearch =Convert.ToString(Request.Params["sSearch"]);
using (EleDBEntities context = new EleDBEntities())
{
// 文章总数
int total = context.Article.Count(n => n.ClassId ==classId);
// 文章Table分页
var articeList = (from item in context.Article
orderby item.Id descending, item.PostTime
where item.ClassId == classId
select item)
.Skip(iDisplayStart)
.Take(iDisplayLength)
.ToList();
var ajaxData = (from item in articeList
select new
{
Id = item.Id,
Title = item.Title,
Hits = item.Hits,
PostTime =Convert.ToDateTime(item.PostTime).ToString("yyyy-MM-dd"),
Author = item.Author
}).ToList();
return Json(
new{sEcho = Request.Params["sEcho"],
iTotalRecords = total,
iTotalDisplayRecords = total,
aaData = ajaxData
},
JsonRequestBehavior.AllowGet);
}
}
客户端代码:
@{
Layout ="~/Views/_MyLayout.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/assets/js/jquery.dataTables.min.js"></script>
<script src="~/Content/assets/js/jquery.dataTables.bootstrap.js"></script>
<div class="table-header">
@(ViewBag.Title)---文章列表
</div>
<div class="table-responsive">
<table id="sample-table-2" class="table table-striped table-bordered table-hover"></table>
</div>
<script type="text/javascript">
var oTable1;
jQuery(function ($){
oTable1 = $('#sample-table-2').dataTable(
{
"bProcessing": true, // 显示加载中
"bServerSide": true, // 服务端处理分页
"bPaginate": true, // 是否分页
"bLengthChange": true, // 是否允许自定义每页显示条数.
"bFilter":false, // 是否使用内置的过滤功能
"sAjaxSource": '/Manage/TableData/?ClassId=@ViewBag.ClassId',
"bAutoWidth": true,
"aoColumns":
[
{ "mDataProp": "Title","sTitle": "文章标题", "bSortable": false, "sClass": "center" },
{ "mDataProp": "Hits","sTitle": "点击次数", "bSortable": false, "sClass": "center" },
{ "mDataProp": "PostTime","sTitle": "更新时间", "bSortable": false, "sClass": "center" },
{ "mDataProp": "Author","sTitle": "编辑者", "bSortable": false, "sClass": "center" },
{
"bAutoWidth":"true",
"mDataProp": "Id",
"sTitle": "操作",
"sClass": "center",
"bSortable": false,
"fnRender": function (obj) {
var detail= '<a class=\"blue\" target=\"_blank\"href=\"/Home/Article/?Id=' + obj.aData.Id +'\">查看</a> ';
var edit ='<a class=\"green\"href=\"/Manage/Article?Action=Edit&Id=' + obj.aData.Id +'\">编辑</a> ';
var del ='<a href="#" οnclick="return del(' + obj.aData.Id +')"class=\"red\">删除</a>';
returndetail + edit + del;
}
}
]
});
});
function del(id) {
if (confirm("确定要删除数据吗?")) {
$.ajax({
type: "POST",
url: "/Manage/Delete",
data: "Id=" + id,
success: success
});
} else {
returnfalse;
}
}
function success(data){
data;
oTable1.fnDraw();
}
</script>