Jquery DataTables的使用

原创 2015年11月20日 11:37:52

前端效果图



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

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="#" onclick="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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Jquery DataTables 列 columns 和 columnDefs基本使用

Jquery DataTables 列 columns 和 columnDefs基本使用columns 和 columnDefs的区别: 相同点:达到相同的效果 不同点:作用不一样,使用不一样(需...

【转帖】jquery DataTables中文使用说明

转自:http://blog.vunso.com/201405/jquery-datatables中文使用说明.htm 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网...

jQuery datatables使用(前台页面分页 简单案例 1 未完待续...)

角色设置                               &...

jQuery的DataTables插件的使用方法[转]

jQuery的DataTables插件的使用方法[转] 分类: jquery+ajax2013-04-12 09:28 2400人阅读 评论(0) 收藏 举报 jQuery的D...

jquery DataTables的使用

转载:blog.csdn.net/cdefg198/article/details/7182341 jQuery 的插件 dataTables 是一个优秀的表格插件,...

jquery之DataTables的使用

jquery之DataTables的使用  document jquery function lsquo 强大的表格解决方案,有多强大,一起来看下吧: 1、DataT...

jQuery的DataTables插件的使用方法

原文:http://www.guoxk.com/node/jquery-datatables 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,...

JQuery datatables 使用Fixedcolumns固定列控件 多选框选中问题解决方案

如题,JQuery datatables 使用Fixedcolmun 多选框选中问题解决方案,如果你恰好用到了固定前几列的插件,还有恰好要有多选的功能,你肯定会遇到类似于点击了表头,想全选下面的每行数...

jQuery datatables使用 ( 封装类实现前台分页 二 续...)

封装的公用分页的工具类: package com.sintai.util;   import java.util.ArrayList; import java.util.List;   p...

jquery DataTables中文使用说明

留存一版关于datable的使用说明,以后不会的时候还可以回来查查。 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)