<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/views/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<script src="${ctx}/static/jquery-1.9.0.min.js"></script>
<script src="${ctx}/static/laypage/laypage.js"></script>
 
<script type="text/javascript">
$(function (){
    demo();
 });
  
function demo(curr) {
    var pageSize = 10;
 
    //以下将以jquery.ajax为例，演示一个异步分页
    $.getJSON('${ctx}/system/user/ajax_list.do', {
        page: curr || 1,
        pageSize: pageSize
    },
    function (res) { //从第1页开始请求。返回的json格式可以任意定义
        laypage({
            cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
            pages: Math.ceil(res.Total/pageSize), //通过后台拿到的总页数
            curr: curr || 1,
            //first: '首页', //若不显示，设置false即可
            //last: '尾页', //若不显示，设置false即可
            //prev: '<', //若不显示，设置false即可
            //next: '>', //若不显示，设置false即可
            jump: function (obj,first) { //触发分页后的回调
                 if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                     demo(obj.curr);
                 }
            }
        });
         $('#tbody').html(PackagData(res));
    });
}
function PackagData(res){
var content="";
    $.each(res.Rows,function(i,o){
        content+="<tr><td>";
        content+=o.id;
        content+="</td><td>";
        content+=o.realname;
        content+="</td></tr>";
         
    });
    return content;
}
</script>
</head>
<body>
<table id="Result" cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>id</th>
                <th>名称</th>
            </tr>
            <tbody id="tbody">
            </tbody>
        </table>
    <div id="page1"></div>
</body>  
</html>
 

[2].[代码] 这是后台java代码，用的是springMVC 跳至 [1] [2]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
 * 用户列表
 */
@RequestMapping("/ajax_list")
@ResponseBody
public Map list(HttpServletRequest request,
        @RequestParam(value="page",defaultValue="1") int page ,
        @RequestParam(value="pageSize",defaultValue="10") int pagesize){
     
    Map<String, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");
    Map<String, SearchFilter> filters = SearchFilter.parse(searchParams);
    //超级管理员查询所有
    if (!UserUtils.isAdmin())
    filters.put("areaid", new SearchFilter("areaid",Operator.GT,UserUtils.getCurrentUserAreaId()));
     
    NewPager pager = new NewPager();
    pager.setPageNumber(page);
    pager.setPageSize(pagesize);
    pager.setFilters(filters);
    if(StringUtils.isNotBlank(request.getParameter("deptid")) && StringUtils.isNotBlank(request.getParameter("deptname"))){
        return service.queryPage(pager,request.getParameter("deptid"));
    }
    return service.queryPage(pager);
     
}

总之，查出的东西需要拼接后才可以使用。

laypage的更多相关文章

  1. laypage分页

    1.分页 laypage({ cont:$("#page"), //容器,仅支持id名\原生DOM对象,jquery对象 pages:, //总页数 skip:true, //是否 ...

  2. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 非常好的分页组建layPage和 layer层特效

    http://layer.layui.com/ http://sentsin.com/layui/laypage/

  4. Jquery+artTemplate+layPage 封装datagrid

    导言 在日常开发中经常会用到列表,相信用过easyui,Ext等很多,的确很强大,但想修改确实也不容易,我也用了几年的easyui,有时间时会想一下,自已随然没有前端的精湛技术,但可以在有这些技术的开 ...

  5. php 经典分页（推荐和laypage配合）

    学习地址:http://www.imooc.com/video/2463 <?php //(ps:推荐使用laypage整站式跳转来渲染分页按钮样式比较舒服http://laypage.layu ...

  6. laypage分页功能demo

    demo代码如下: <div id="view1"></div> <div id="page1"></div> ...

  7. layPage异步分页

    layPage分页,参照官网实例写了一份.如下: function InitDataByPage(curr) { ; $.getJSON("InitDataByPage", { & ...

  8. LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  9. laypage 使用

    最近发现一个特别好用的前端分页插件,分享一下 <!doctype html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. stm8s103头文件

    //============================================================================== //================= ...

  2. NOIP 2015 游记

    本来和zly和wxh约好了 高三一起再来玩一次复赛,结果最终只有我一个人来了说...貌似是年段主任不让去...总算见识了比我们学校的YSD更爱管闲事的年段主任. 今年比赛竟然在衢州二中,学校不大,但感 ...

  3. thunkify和co的邂逅

    上一篇说到thunkify的作用,这一篇说一下thunkify和co的集合 co中有一块代码 /** * Convert a thunk to a promise. * * @param {Funct ...

  4. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  5. 几种排序算法的学习，利用Python和C实现

    之前学过的都忘了,也没好好做过总结,现在总结一下. 时间复杂度和空间复杂度的概念: 1.空间复杂度:是程序运行所以需要的额外消耗存储空间,一般的递归算法就要有o(n)的空间复杂度了,简单说就是递归集算 ...

  6. 作业8 Alpha阶段项目总结

    我们的扫雷游戏已经基本完成. 游戏共分3个难度 每个难度的格数和雷的格数也有不同 具体的游戏会在展示时候让大家看到 小组成员分数: 史劭聪 20分 马浩然 20分

  7. android 代码优化

    http://android.tgbus.com/Android/androidnews/200812/172247.shtml http://blog.163.com/jzq_520/blog/st ...

  8. 错误：媒体集有 2 个媒体簇，但只提供了 1 个 sql2005 备份错误。

    错误:媒体集有 2 个媒体簇,但只提供了 1 个 sql2005 2010-10-19 11:44:06|  分类: sql|举报|字号 订阅     ql2005备份的时候,选择备份路径是一方面,但 ...

  9. DOM扩展之HTML5 插入标记

    11.3.6 插入标记 当需要在文档中插入大量的HTML标记时,通过DOM操作就会是非常麻烦的,相对而言,使用插入标记的技术,直接插入HTML字符串不仅简单而且更快.以下插入标记相关的DOM操作已经纳 ...

  10. android densityDpi 的由来

    ---恢复内容开始--- 今天做屏幕适配的时候,发现一个奇怪的现象: HTC D820u/ 红米Note/HONOR H30-L02 /Coolpad 8297-T01 4款手机的分辨率均为 1280 ...