没有合适的资源?快使用搜索试试~ 我知道了~
首页Jquery dataTable中文API中文文档
资源详情
资源评论
资源推荐
jquery.datatables 中文帮助文档
类别:Asp.Net MVC 作者:admin 日期:2013/7/24 8:32:00 阅读:18420 次
摘要:jquery.dataTable 在 asp.net mvc4 中的使用文档,相关说明
1.jquery.DataTables 下载地址
http://www.datatables.net/
2.jquery.DataTabales 使用样式
引用 bootstrap.css 和 dt_bootstrap.css
引用必须的 jquery.js ,jquery.dataTables.js 和 dt_bootstrap.js 文件
下载地址
查看表格的
HTML
源码
1. <table class="table table-striped table-hover table-bordered
datatable" id="article">
2. <thead>
3. <tr>
4. <th>编号</th>
5. <th style="width:300px">文章标题</th>
6. <th>所属类别</th>
7. <th style="width:80px">点击次数</th>
8. <th>审核</th>
9. <th>置顶</th>
10. <th>热点</th>
11. <th>添加时间</th>
12. <th>操作</th>
13. </tr>
14. </thead>
15. <tbody>
16. </tbody>
17. </table>
3.Jquery.DataTables 的应用场景
场景一,服务端一次性取出所有数据,由客户端来处理这些数据
查看服务端代码
1. //获取文章所有文章
2. public JsonResult GetArticle()
3. {
4. var DataSource =
articleRepository.GetAll().OrderByDescending(o=>o.Id);
5. var data=DataSource.Select(o=>new object[]{
6. o.Id,
7. o.Title1,
8. categoryRepository.GetBy(c=>c.Id==o.CategoryId).Category
Name,
9. o.Click,
10. o.Audit,
11. o.IsTop,
12. o.IsHot,
13. o.AddTime.ToString(),
14. o.Id
15. });
16. return Json(new {
17. sEcho=1,
18. iTotalRecords=DataSource.Count(),
19. iTotalDisplayRecords=data.Count(),
20. aaData=data
21. },JsonRequestBehavior.AllowGet);
22. }
#endregion
服务端数据是数组格式,最终返给客户端的是 json 格式的字符串
客户端代码:
1. jQuery(document).ready(function () {
2. $('#article').dataTable({
3. "oLanguage": {//语言国际化
4. "sUrl": "@theme/js/jquery.dataTable.cn.txt"
5. },
6. "bServerSide":false,//服务端处理分页
7. "sAjaxSource": "/kuiyu.net/article/getarticle",
8. 'bPaginate': true, //是否分页。
9. "bProcessing": true, //当 datatable 获取数据时候是否显示正在处理
提示信息。
10. 'bFilter': false, //是否使用内置的过滤功能
11. 'bLengthChange': true, //是否允许自定义每页显示条数.
12. //'iDisplayLength':13, //每页显示 10 条记录
13. "sPaginationType": "bootstrap", //分页样式 full_numbers
14. "aoColumns": [
15. { "sClass": "center", "sName": "Id" },
16. { "sClass": "center", "sName": "Title1" },
17. { "sClass": "center", "sName": "CategoryId" },
18. { "sClass": "center", "sName": "Click" },
19. { "sClass": "center", "sName": "Audit" },
20. { "sClass": "center", "sName": "IsTop" },
21. { "sClass": "center", "sName": "IsHot" },
22. { "sClass": "center", "sName": "AddTime" },
23. { //自定义列
24. "sName": "Id",
25. "sClass": "center",
26. "bSearchable": false,
27. "bStorable": false,
28. "fnRender": function (obj) {
29. return '<a class="ajaxify" href=\"/admin/Article/edit?Id=' +
obj.aData[0] + '\">编辑</a> ' + ' <a href=\"#\"
onclick=\"DeleteArticle('+obj.aData[0]+')\">删除</a>';
30. }
31. }
32. ]
33. });
34. });
客户端 aoColumns 中的 sName 与后台传出的字段对象名称和数量,保持一致,
同时 "bServerSide":false
如果"bServerSide":false 时,不会向服务器发送任何的参数,服务端只需取出数
据即可
用 sName 绑定字段
场景二,服务端处理分页后数据,客户端呈现
服务端代码:
1. //获取文章所有文章
2. public JsonResult GetArticle(DataTableParameter param)
3. {
4. var DataSource =
articleRepository.GetAll().OrderBy(o=>o.UpdateTime);
5. //开始记录
6. int
iDisplayStart=Convert.ToInt32(Request.Params["iDisplayStart"
]);
7. //单页显示记录数
8. int
iDisplayLength=Convert.ToInt32(Request.Params["iDisplayLen
gth"]);
9. var data =
DataSource.Skip(iDisplayStart).Take(iDisplayLength).Select(o
=>new {
10. Id= o.Id,
11. Title1= o.Title1,
12. CategoryName=
categoryRepository.GetBy(c=>c.Id==o.CategoryId).Category
Name,
13. Click= o.Click,
14. Audit= o.Audit,
15. IsTop= o.IsTop,
16. IsHot= o.IsHot,
17. AddTime =o.AddTime.ToString(),
18. Id2= o.Id
19. }).ToList();
20. return Json(new {
21. sEcho=param.sEcho,
22. iTotalRecords=DataSource.Count(),
23. iTotalDisplayRecords=DataSource.Count(),//data.Count(),
24. aaData=data
25. },JsonRequestBehavior.AllowGet);
26. }
服务端分页,数据源要是对象, 只需要起始记录与显示的记录数,
iTotalRecords,iTotalDisplayRecords 为记录总数
最终返回的也是 json 字符串
剩余48页未读,继续阅读
wgza12345678
- 粉丝: 0
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1