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

        }


   表格重新加载,因为这样才能拿到后面传来的数据,如果不加这个效果没出来(付出了时间的代价)。


 

   

总结:

    对于这样的框架还有很多值得我们学习的地方,上面的这些按纽都可以灵活的去添加,例如:添加导入、导出数据等,都容易实现,好的框架的学习,让我们学会了如何站在举人的肩膀上更快成长,具体的行动需要我们融入自己的学习当中,在实践中不断的体会到了,学与会用真的是两回事啊,大家共同努力多动手多实践。

 

  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 49
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 49
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值