pagination分页问题

  一,真心话(可能是我蠢0.0):

20天easyui学习后,这里想整理下一个困扰我很久的分页问题,在附代码前,说下为什么会困扰我那么久。easyui很重要的一点就是控件初始化问题(最好统一,要么都在Js里,要么都在页面里),这在分页问题里特别重要,当你想要用datagrid自带的pagination属性时,千万不要在页面中初始化,因为那样当你在js里获取后台传来的表格数据时,不管你怎么选择pagesize和pagenumber时,表格都不会刷新的。下面就分享下前后台代码。写的可能不是很好吧,多多包涵。

二,效果图(就是那么朴实0.0):

   

 三,js代码(写的有点丑0.0):

  datagrid 初始化:

 $(‘#orderquery_datagrid‘).datagrid({
      url:‘/DrugManageSystem/getOrderServlet?pagenumber=1&pagesize=10‘,
      fitColumns:true,
      rownumbers:true,
      singleSelect:true,
      pagination:true,
      columns:[[
       {field:‘op‘,width:90,align:‘center‘,
            formatter:formatdetail},
       {field:‘ordercompany‘,width:195,align:‘center‘},
       {field:‘orderdate‘,width:140,align:‘center‘},
       {field:‘ordercount‘,width:90,align:‘center‘},
       {field:‘billcount‘,width:90,align:‘center‘},
       {field:‘goodscount‘,width:90,align:‘center‘},
       {field:‘ordertype‘,width:90,align:‘center‘},
       {field:‘status‘,width:90,align:‘center‘},
       ]],});

  获取datagrid 里pagination控件

  $(‘#orderquery_datagrid‘).datagrid(‘getPager‘).pagination({
      pageSize: 10,
      pageList: [10,20,30],
      beforePageText: ‘第‘,
      afterPageText: ‘页    共 {pages} 页‘,
      displayMsg: ‘当前显示 {from} - {to} 条记录   共 {total} 条记录‘,
      onSelectPage:function(pageNumber,pageSize){                  getData(pageNumber,pageSize);}
      );   //(beforePageText,afterPageText,displayMsg这些属性的值可以 自定义样式,也可以不写,自带)

发送给后台的 ajax 函数:

  function getData(pageNumber,pageSize){
     $.ajax({
         type:"Post",
         url:"/DrugManageSystem/getOrderServlet",
	 data:{"pagesize":pageSize,"pagenumber":pageNumber},
	 async:false,
	 dataType:"json",
         success:function(showcontentarray){
	    $(‘#orderquery_datagrid‘).datagrid(‘loadData‘,showcontentarray);
	 },
	 error:function(){alert("加载失败");}
	 );
   }

四,后台代码(耐心看,虽然丑0.0):

Servlet部分:   

 public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    int pagesize= Integer.parseInt(request.getParameter("pagesize"));
    int pagenumber= Integer.parseInt(request.getParameter("pagenumber"));

    JSONObject object=new OrderBLL().getOrder(pagenumber, pagesize);
    PrintWriter out=response.getWriter();
    out.print(object);
    out.flush();
    out.close();
   }

    BLL层:  

  public JSONObject getOrder(int showpage,int pagesize){    //DAO层取出所有数据
    List<Order> list=new OrderDAO().getOderData(); 
    JSONArray array=new JSONArray();

//分页函数
    List<Order> list1=new OrderPageNation().orderPage(list,showpage, pagesize);	
    array=JSONArray.fromObject(list1);
    JSONObject ob=new JSONObject();
      ob.put("total",list.size());
      ob.put("rows", array);
        return ob;
    }

这里分页的实现,我是把所有数据都取出后,在根据pagenumber和pagesize利用函数对List进行操作

分页函数(因为这是比较早前写的,有点糙0.0

public class OrderPageNation {

public List<Order> orderPage(List<Order> alldata,int showpage,int pagesize){
	List<Order> list =new ArrayList<Order>();
	int datacount=alldata.size();
	int pagecount=getPagecount(datacount, pagesize);
	int foot;
	int head=datacount-pagesize*(showpage-1)-1;
	if(showpage==pagecount){
	        foot=0;
	}
        else{
	  foot=datacount-pagesize*showpage;
	}        

//我这里是倒叙输出,后添加的记录显示在前面
	while(showpage<=pagecount){
	    for(int j=head;j>=foot;j--){
	    	Order jobject=alldata.get(j);
	    	list.add(jobject);
	    }
	    return list;
	}
	    return null;
  }

//获取总页数
   public int getPagecount( int datacounts,int pagesizes) {
	int number=0;
	if(datacounts%pagesizes==0){
	    number=datacounts/pagesizes;
	}
	else{
          number=datacounts/pagesizes +1;
	}
	  return number;
    }}

DAO层 这里就不写了

 

以上就是分页问题的所有总结了,希望看到的人有所帮助,后面还会陆续写一些其他控件的问题,第一次分享博客,写的不好的地方见谅......21:36:23

时间: 2024-10-12 03:22:18

pagination分页问题的相关文章

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

EasyUI基础入门之Pagination(分页)

前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组件Pagination pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据,它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入?分页的右边定制button来增强分页功能. 只是pagination是依赖于

Pagination( 分页)

一. 加载方式//class 加载方式<div id="box" class="easyui-pagination"data-options="total:2000,pageSize:10"style="background:#efefef;border:1px solid #ccc;"></div> //JS 加载调用$('#box').pagination({total : 2000,pageSiz

jQuery Pagination分页插件

jQuery Pagination分页插件 1.介绍 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟. 2.使用方法 1.引入以下的js和css文件 1 <link rel="stylesheet" href="pagination.css"> 2 <script type="text/javascript" src="jquery.min.js"></script&g

Pagination(分页) 从前台到后端总结

一:效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码.                                   回到顶部(go to top) 二:上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 名 描述 参数值  maxentries 总条目数  必选参数,整数  items_per_page  每页显示的条目数  可选参数,默认是10  num_display

JQuery 常用积累(二)Pagination 分页组件

官方Demo网址:http://mricle.com/JqueryPagination 分页组件几乎是一般网站都会涉及到的组件,网上有很多这样的插件,自己挑来跳去选择了这一款,功能强大,可扩展性比较强,而且幕后的工程师一直在完善这个插件,不废话了,上干货. (模拟场景:商店网站,俺要根据用户选择的查询条件,来查询数据库,并展示到前台) 1.JSP页面: 如果你的web项目前台是基于bootstrap,js只需要引入2个js: <r:script path="/style/js/Jquery

JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1nvaq99R 密码:9nfb 上效果图: 页面代码 <script type="text/javascript"> //分页查询开始 $(document).ready(function() { getDataList(0, null); }); var rows = 10;

.net+easyui系列--Pagination 分页

使用 JS 创建分页 <div id="pat" style="background:#efefef;border:1px solid #ccc;"></div> JS代码: var tta = 200; //定义总数 $('#pp').pagination({ total: tta, pageSize: 10, //每页显示行数 onSelectPage: function (pageNumber, pageSize) {//改变页码后的触

EasyUI - pagination 分页组件

总页数是手动填写,后续进行更改……………… 效果: html代码: <!--使用标签创建--> <%--<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background: #efefef; border: 1px solid #ccc;"></div>--%>