jqgrid 分页 (基于ashx)
1:数据库表创建并往中插入200000条数据:
复制代码
CREATE TABLE [dbo].[T_School](
[ID] [int] IDENTITY(1,1) NOT NULL,
[SchoolName] [nvarchar](255) COLLATE Chinese_PRC_CI_AS NULL,
[BuildDate] [datetime] NULL,
[Address] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[IsSenior] [bit] NULL,
[StudentNum] [int] NULL,
CONSTRAINT [PK_T_School] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
复制代码
2:myJqgrid.js封装后的JqGird代码:
复制代码
/*
* 返回json格式中 最好默认带有ID列
默认显示 20列
* 列表id = "gridTable"
列表url = 'Handler.ashx?action=page'
列表datatype = 'json'
列表colNames = ['ID', "名称", '性别', '手机', '邮箱']
列表colModel = 。。。
列表标题 caption = "用户列表"
列表修改URL editurl = "Handler.ashx?action=oper"
列表默认排序 sortname = "ID";
页码ID gridPagerID = "gridPager"
*/
//最后选中的行
var lastsel;
function myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID) {
var myGrid = $("#" + id);
myGrid.jqGrid({
url: url,
datastr: "data.json",
datatype: datatype,
rowNum: 20,
rowList: [10, 20, 50],
colNames: colNames,
colModel: colModel,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.pageindex; },
total: function (obj) { return obj.pagecount; },
records: function (obj) { return obj.total; }
},
prmNames: {
page: 'PageIndex',
rows: 'PageSize',
sort: 'Order',
order: 'Sort'
},
hidegrid: false,
rownumbers: true,
loadonce: false,
sortname: sortname,
sortorder: 'desc',
pager: "#" + gridPagerID,
viewrecords: true,
caption: caption,
toolbar: [true, "top"],
altRows: true,
//最后选中的行
onSelectRow: function (id) {
if (id && id !== lastsel) {
grid.jqGrid('restoreRow', lastsel);
lastsel = grid.jqGrid('getRowData', id)[sortname];
}
},
editurl: editurl
});
}
复制代码
其中要注意这两部分的参数,其中pagecount-json中代表页码总数的数据,total-json中代表数据行总数的数据,pageindex-json中代表当前页码的数据;prmNames则是重命名传到后台的分页参数名称;
传到后台的URL:GET /CountryHandler.ashx?_search=false&nd=1397394772871&PageSize=20&PageIndex=1&Order=ID&Sort=desc
复制代码
jsonReader: {
repeatitems: false,
root: function (obj) { return obj.rows; },
page: function (obj) { return obj.pageindex; },
total: function (obj) { return obj.pagecount; },
records: function (obj) { return obj.total; }
},
prmNames: {
page: 'PageIndex',
rows: 'PageSize',
sort: 'Order',
order: 'Sort'
},
复制代码
3:Html代码及JS代码:
复制代码
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.10.4.min.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/myJqgrid.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
showJqGrid();
});
function showJqGrid() {
var id = "gridTable";
var url = "CountryHandler.ashx";
var datatype = "json";
var colNames = ["ID", "名称","地址"];
var colModel = [
{ name: "ID", index: "ID"},
{
name: "SchoolName", index: "SchoolName", width: 200, align: "center"
},
{
name: "Address", index: "Address", width: 250, align: "center"
}
];
var caption = "学校列表";
var editurl = "CountryHandler.ashx";
var sortname = "ID";
var gridPagerID = "gridPager";
myJqGrid(id, url, datatype, colNames, colModel, caption, editurl, sortname, gridPagerID);
//initToolbar(id, gridPagerID);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="gridTable">
</table>
<p id="gridPager">
</p>
</form>
</body>
</html>
复制代码
4:后台的一般处理文件CountryHandler.ashx代码:
复制代码
using System.Web.Script.Serialization;
using ClassLibrary1;
using DAL;
namespace WebApplication1
{
/// <summary>
/// CountryHandler 的摘要说明
/// </summary>
public class CountryHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
DAL.TestDbEntities contexts = new TestDbEntities();
context.Response.ContentType = "text/plain";
var quey = from School in contexts.T_School select School;
GridDatas model = new GridDatas();
int PageIndex= RequstString("PageIndex").Length == 0 ? 1 : int.Parse(RequstString("PageIndex"));
int PageSize=RequstString("PageSize").Length == 0 ? 20 : int.Parse(RequstString("PageSize"));
int TotalCount=quey.Count<T_School>();
model.pagecount = (TotalCount/PageSize).ToString();
model.pageindex = PageIndex.ToString();
model.total = TotalCount.ToString();
model.rows = quey.OrderBy(t=>t.ID).Skip((PageIndex - 1) * PageSize).Take(PageSize).ToList();
JavaScriptSerializer serializer = new JavaScriptSerializer();
string Resul = serializer.Serialize(model);
context.Response.Write(Resul);
}
public static string RequstString(string sParam)
{
return (HttpContext.Current.Request[sParam] == null ? string.Empty
: HttpContext.Current.Request[sParam].ToString().Trim());
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class GridDatas
{
public string pageindex { set; get; }
public string pagecount { get; set; }
public string total { get; set; }
public List<T_School> rows { get; set; }
}
}
复制代码
注意:同样借实体类GridDatas来实同JqGrid要求的JSON格式;转化成后的Json代码如下:
复制代码
{"pageindex":"1","pagecount":"10000","total":"200000","rows":[{"RelationshipManager":{},"ID":1,"SchoolName":"中学教育0","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":2,"SchoolName":"中学教育1","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":3,"SchoolName":"中学教育2","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":4,"SchoolName":"中学教育3","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":5,"SchoolName":"中学教育4","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":6,"SchoolName":"中学教育5","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":7,"SchoolName":"中学教育6","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":8,"SchoolName":"中学教育7","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":9,"SchoolName":"中学教育8","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":10,"SchoolName":"中学教育9","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":11,"SchoolName":"中学教育10","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":12,"SchoolName":"中学教育11","BuildDate":"\/Date
(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":13,"SchoolName":"中学教育踏浪帅
12","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":355},{"RelationshipManager":{},"ID":14,"SchoolName":"中学教育
13","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":15,"SchoolName":"中学教育
14","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":16,"SchoolName":"中学教育
15","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":17,"SchoolName":"中学教育
16","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390},{"RelationshipManager":{},"ID":18,"SchoolName":"中学教育
17","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":19,"SchoolName":"中学教育踏
浪帅18","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":456},{"RelationshipManager":{},"ID":20,"SchoolName":"中学教
育19","BuildDate":"\/Date(1393940972000)\/","Address":"厦门软件园","IsSenior":true,"StudentNum":390}]}
jqgrid 分页 (基于ashx)的更多相关文章
- JqGrid分页按钮图标不显示的bug
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
- jqGrid 分页
这两天一直在搞jqGrid分页,焦头烂额,不过还是有点收获的(主要是后台分页): jqGrid分页可以分为两种,远程数据(服务器数据)分页和本地数据分页, 先看远程数据分页: $(&q ...
- jqGrid jqGrid分页参数+条件查询
HTML <div class="row"> <div class="col-sm-20"> <form id="for ...
- jqgrid 分页时,清空原表格数据加载返回的新数据
由于,我们是动态分页,分页后的数据是在触发分页后动态加载而来.如何使jqgrid清空原数据而加载新数据? 1)调用jqgrid的 clearGridData 方法清空表格数据 2)调用jqgrid的 ...
- 本地数据jqGrid分页
var mydata=''; $(function() { var str = ''; str += "<span>共<span id='p_total'></ ...
- LayUI分页基于ASP.NET MVC
---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...
- 利用JqGrid结合ashx及EF分页显示列表之二
上一篇文章简单利用JqGrid及ashx进行一个数据列表的显示,要文的重点是利用EF的分页与JqGrid进行结合,EF本文只是简单运用所以没有很规范,重点还是JqGrid分页的实现;本实例把JqGri ...
- Jqgrid的用法总结与分页功能的拓展
这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...
- 利用JqGrid结合ashx显示列表之一
最近项目决定运用JqGrid列表控件显示相关数据,以前接触比较多还是easyui和Ext.Net的列表控件,文章简单写的小实例进行一个总结: 1:引入相关的JS及CSS文件,JqGrid目前可以利用J ...
随机推荐
- 测试xss
<script>window.onload=function(){ alert('加载完毕');}</script>
- 关于a标签颜色的探索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java 浅析Thread.join()
概要 本文分为三部分对 Thread.join() 进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() ...
- linux mysql添加、删除用户、用户权限及mysql最大字段数量
1. 登录: mysql -u username -p 显示全部的数据库: show databases; 使用某一个数据库: use databasename; 显示一个数据库的全部表: show ...
- git 的回退
今天下午写了一下午的代码给合并没了 然后晚上觉得还是要好好学习一下git的使用 推荐几个git的教程 https://www.liaoxuefeng.com/wiki/0013739516305929 ...
- Python并发实践_03_并发实战之一
16S数据质控流程,一次下机lane包括很多的项目,每个项目有独立的合同号,一个项目可能包含16S或者ITS两种,通过一个完整的pipeline,将上游拆分好的数据全部整理成可以直接分析的数据.原本这 ...
- 数组a[n]中存放1-n中的n-1个数,给出算法找出重复的那一个数
问题描述: 数组a[n]中存放1-n中的n-1个数,给出算法找出重复的那一个数. 算法一: 对数组a[n]进行冒泡排序,如果冒泡所得的最值和前一个最值相等,则该最值为重复的数. 分析: 该算法时间复杂 ...
- SpiderMonkey js引擎的静态编译与使用
原文出处: http://yaolixing.oltag.com/gns-8ABFFE2D-EB1E-44FA-9118-217ED7959536.html 几百KB的跨平台js引擎,是不是您心之所想 ...
- Validation of viewstate MAC failed 解决办法
大部分人都说是在页里或web.config里加EnableEventValidation="false" EnableViewStateMac="false" ...
- class java.awt.HeadlessException : No X11 DISPLAY variable was set, but this program performed an operation which requires it.
今天上午打印回单功能发布到测试环境,报了: class java.awt.HeadlessException : No X11 DISPLAY variable was set, but this p ...