Jquery DataTables的使用

前端效果图

服务段处理分页后数据，客户端呈现

jquery.DataTables下载地址

http://www.datatables.net/

服务端代码：

// 异步 得到文章列表 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>