jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码;
图示1:
通常情况下页面数据的分页显示分成真假两种。真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示。而假分页则是后台一次性将所有的数据一起传送到前台,再由前端程序来控制数据的显示与遮蔽。
既然要分页,那么首先就必须要获得所有的数据,并且知道数据的数量。这步可以是由后台程序返回告知,当然也可以有javascript自己去读取。
datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页,然后读取相应页数的记录,和总记录数total一块返回即可,页面如上图所示。
核心代码
要想实现分页其pagination属性必须为true:
//设置分页控件,设置其各个属性值与是否要允许列排序等
<table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;
height: 400px;" idfield="itemid" pagination="true" iconcls=" icon-save" remoteSort="false"
data-options="rownumbers:true,
url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],
method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">
一般处理程序中获取前台传过来的pageRows,page,
//================================================================
//获取分页和排序信息:页大小,页码,排序方式,排序字段
int pageRows, page;
pageRows = 10;
page = 1;
string order, sort, oderby; order = sort = oderby = "";
if (null != context.Request.QueryString["rows"])
{//获取前台传过来的每页显示数据的条数
pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim()); }
if (null != context.Request.QueryString["page"])
{
//获取当前的页码
page = int.Parse(context.Request.QueryString["page"].ToString().Trim()); }
if (null != context.Request.QueryString["sort"])
{//排序方式 order = context.Request.QueryString["sort"].ToString().Trim(); }
if (null != context.Request.QueryString["order"])
{
//根据的字段
sort = context.Request.QueryString["order"].ToString().Trim(); }
调出分页查询数据B层的方法
//调用分页的GetList方法
DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
int count = scorebll.GetRecordCount(strWhere.ToString());//获取条数
string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
context.Response.Write(strJson);//返回给前台页面
context.Response.End();
D层中的方法:
根据查询条件,是否排序(以哪一列排序),调用数据库中查询符合条件的数据
/// <summary>
/// 分页获取数据列表
/// </summary>
public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
{
StringBuilder strSql=new StringBuilder();
strSql.Append("SELECT * FROM ( ");
strSql.Append(" SELECT ROW_NUMBER() OVER (");
if (!string.IsNullOrEmpty(orderby.Trim()))
{
strSql.Append("order by T." + orderby );
}
else
{
strSql.Append("order by T.ScoreStyleID desc");
}
strSql.Append(")AS Row, T.* from t_scoreRule T ");
if (!string.IsNullOrEmpty(strWhere.Trim()))
{
strSql.Append(" WHERE " + strWhere);
}
strSql.Append(" ) TT");
strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
return DbHelperSQL.Query(strSql.ToString());
}
在实现的过程中,我们要记得前台加上这句话
//增加查询参数,重新加载表格
function reloadgrid() { //查询参数直接添加在queryParams中 var queryParams = $('#tt').datagrid('options').queryParams;
getQueryParams(queryParams);
$('#tt').datagrid('options').queryParams = queryParams;//传递值 $("#tt").datagrid('reload');//重新加载table }
表格重新加载,因为这样才能拿到后面传来的数据,如果不加这个效果没出来(付出了时间的代价)。
总结:
对于这样的框架还有很多值得我们学习的地方,上面的这些按纽都可以灵活的去添加,例如:添加导入、导出数据等,都容易实现,好的框架的学习,让我们学会了如何站在举人的肩膀上更快成长,具体的行动需要我们融入自己的学习当中,在实践中不断的体会到了,学与会用真的是两回事啊,大家共同努力多动手多实践。
jquery easyui datagrid 分页实现---善良公社项目的更多相关文章
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- jquery easyui datagrid 分页 详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
- jquery easyui datagrid 分页 详解(java)
1.首先引入easyui包,可以在官方网站下载,http://www.jeasyui.com/download/index.php <link rel="stylesheet" ...
- jquery easyui datagrid 分页实现
通常情况下页面数据的分页显示分成真假两种.真分页是依靠后台查询时控制调出数据的数量来实现分页,也就是说页面在后台对数据进行处理,仅传输当前需要页的数据到前台来显示.而假分页则是后台一次性将所有的数据一 ...
- JQuery easyui Datagrid 分页事件
easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
随机推荐
- Intellij IDEA自动编译问题
对IDEA的界面很有爱,但是感到他的项目启动速度太慢了.所以查了资料做了优化. 1:开启自动测试 File->setting->compiler 勾选上上面的, 2修改run/de ...
- Python的一个解释凯撒密码的程序
#!/usr/bin/env python # -*- coding: utf-8 -*- ''' { Title:CaserCode Author:naiquan Type:crypto Detai ...
- vue--"卡片层叠" 组件 开发小记
背景:影城移动点餐web App增加会员卡支付功能 需求:确认订单页点击会员卡项弹出会员卡列表,多张会员卡依次叠加覆盖上一张80%的高度,点击任意卡片则改卡片置为当前卡片,只有当前卡片显示全部卡片信息 ...
- 验证码识别之w3cschool字符图片验证码(easy级别)
起因: 最近在练习解析验证码,看到了这个网站的验证码比较简单,于是就拿来解析一下攒攒经验值,并无任何冒犯之意... 验证码所在网页: https://www.w3cschool.cn/checkmph ...
- Go 语言函数闭包
Go 语言支持匿名函数,可作为闭包.匿名函数是一个"内联"语句或表达式.匿名函数的优越性在于可以直接使用函数内的变量,不必申明. 以下实例中,我们创建了函数 getSequence ...
- Docker容器访问控制
容器的访问控制,主要通过 Linux 上的 iptables 防火墙来进行管理和实现.iptables 是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 容器要想访问外部 ...
- 在Spring Boot框架下使用WebSocket实现聊天功能
上一篇博客我们介绍了在Spring Boot框架下使用WebSocket实现消息推送,消息推送是一对多,服务器发消息发送给所有的浏览器,这次我们来看看如何使用WebSocket实现消息的一对一发送,模 ...
- 20160221.CCPP体系详解(0031天)
程序片段(01):01.结构体静态数组.c+02.结构体动态数组.c 内容概要:结构体数组 ///01.结构体静态数组.c #include <stdio.h> #include < ...
- Android 动态加载(防止逆向编译) jar混淆加密
最近工作中接到了一个研究防止逆向编译的任务.研究了几天资料,最后基本实现了防破解技术,在这个工程中,也略有一些心得体会,现整理下来分享,供大家探讨参考研究.文中如有纰漏.失实之处,请大家及时给与指正. ...
- Android5.0特性阴影效果和裁剪
阴影和剪裁 View的z属性 Material Design建议为了凸显布局的层次,建议使用阴影效果,并且Android L为了简化大家的工作,对View进行了扩展,能使大家非常方便的创建阴影效果: ...