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 - 2 四种数据来源

使用 jQuery dataTables - 2 四种数据来源 四种数据来源 对于 dataTables 来说,支持四种表格数据来源。 最为基本的就是来源于网页,网页被浏览器解析为 DOM ...
  • hireboy
  • hireboy
  • 2013年04月11日 17:11
  • 866

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

角色设置                                                            $(...

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

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

Jquery DataTables 列 columns 和 columnDefs基本使用

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

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

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

JQuery Datatables 使用固定列 固定表头的下方显示不全(横线不出来了)

在使用表格固定列的时候,因为使用的是表格的插件fixedcolumns,但在使用的过程中,就会发现这样的问题:固定列的表头下方横线没有显示不出来,不全,如下图:          debug...

jQuery DataTables 使用方法整理(下)

http://chengkai.wang/js/76.html Data sources 数据源 DataTables可以从四种基本形式的数据源获取数据: HTML document (DOM)...

JQuery DataTables插件使用说明(最新)

JQuery DataTables 实例教程系列,文中的所有实例 都是按照最新版本的官网文档编写的,是我在使用过程中 爬过得坑。...

jquery-dataTables的使用

jquery-dataTables的使用 一、jqueryDatatables的下载        http://www.datatables.net/download/packages 二、添加...
  • An__Ye
  • An__Ye
  • 2015年10月23日 21:35
  • 262

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

封装的公用分页的工具类: package com.sintai.util;   import java.util.ArrayList; import java.util.List;   p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery DataTables的使用
举报原因:
原因补充:

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