ASP.NET使用Jquery datatable列表插件

最近的项目改用bootstrap样式,表格列表也使用Jquery DataTable插件。样式挺美观的。先来张截图:

1、初始化表格插件

 1 oTable = table
 2                     .DataTable(
 3                             {
 4                                 "language": GlobalDataTablesLang,
 5                                 "ordering": false, //开关,排序功能    是否能排序
 6                                 "pageLength": 10, // 默认每页记录数
 7                                 "searching": false, //开关,过滤功能  显示搜索
 8                                 "lengthChange": true, //开关,改变每页显示数据数量  显示
 9                                 "lengthMenu": [ // 设置每页多少记录数
10                                 [5, 10, 15, 25, 50, 100],
11                                         [5, 10, 15, 25, 50, 100]],
12                                 "bRetrieve": false,
13                                 "columns": [{
14                                     "data": "PostID"
15                                 }, {
16                                     "data": "PostID"
17                                 }, {
18                                     "data": "PostName"
19                                 }, {
20                                     "data": "PostGuid"
21                                 }, {
22                                     "data": "PostBZ"
23                                 }],
24                                 "serverSide": true,
25                                 "ajax": {
26                                     "url": "action/GetUserList",
27                                     "type": "POST"
28                                 },
29                                 "fnPreDrawCallback": function () {
30                                     App.startPageLoading();
31                                     return true;
32                                 },
33                                 "fnDrawCallback": function () {
34                                     App.stopPageLoading();
35                                     RenderCheck();
36                                 },
37                                 "fnRowCallback": function (nRow, aData, iDataIndex) {
38                                     return nRow;
39                                 }
40                             });
41
42                         }

2、后台返回的数据格式

{"draw":"1","recordsTotal":3,"recordsFiltered":3,"data":[{"PostID":0,"PostName":"财务","PostGuid":"f45d761fdbd34dbcbf2d088247a745b8","PostBZ":""},{"PostID":0,"PostName":"馆长","PostGuid":"f4eaba3b7a6d42ba90be23edbd863d8f","PostBZ":""},{"PostID":0,"PostName":"前台人员","PostGuid":"66cceb2fa22f42b3acda6a069529132d","PostBZ":""}]}

 3、刷新表格

oTable.ajax.reload();
时间: 2024-11-05 16:00:41

ASP.NET使用Jquery datatable列表插件的相关文章

jquery.datatable插件从数据库读取数据

一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: "sEcho":这个属性需要原封不动地传回给datatable,具体的作用我也不清楚,但是根据它值的变化情况来看,好像是一个操作次数的计数(之前我一直把它当做是pageindex来用,结果发现,不论我在datatable中是翻下一页还是翻上一页,它一直在增加.) "iDisplayStart&q

分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

基于bootstrap的jQuery多级列表树插件

http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html http://www.htmleaf.com/Demo/201502141380.html 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和

在ASP.NET MVC中使用JQ插件datatable

1. Models public class Citys { public int Id { get; set; } public string CityName { get; set; } public int ZipCode { get; set; } } 2. Controller public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionRe

jquery dataTable汉化(插件形式)

1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注:只测试过DataTables-1.10.5版本 /*汉化by lxf qq1140215489*/ (function(){ var oLanguage={ "oAria": { "sSortAscending": ": 升序排列", "s

jquery datatable 参数

jquery datatable 参数 DataTables(http://www.datatables.net/)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内). 先把它主页上写的特性翻译罗列如下: 可变长度分页:动态过滤:多列排序,带数据类型检测功能:列宽度的智能处理:从多种数据源获取数据(DOM,js Array, ajax file, server-side returning):滚动配置属性:完整国际化支持: jquery UI T

jQuery 网格布局插件

如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 jQuery 网格布局插件(jQuery Grid Plugins),它可以帮助你在创建网格布局项目时大大缩短开发时间. 1. Freewall Freewall 是一个跨浏览器和响应式的 jQuery 插件,以帮助您创建多种类型的网格布局:灵活的布局,图像布局,嵌套网格,流体网格,Metro 风格

jQuery Datatable系列文章(一)用法以及属性

废话不多说上效果图 jQuery Datatable 插件可以去官网下载 先说说如何用法 戳此处看 我还是在这稍微说下 (声明一下html代码里面有各种类,是因为做项目的时候用的bootstrap,你可以不用加) 在js里面如何调用呢 如下 来具体解释下用法 1 if (typeof gp.dataTable != 'undefined' && gp.dataTable != null) { //为了避免多次初始化datatable() 2 3 gp.dataTable.fnClearTa

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J