jquery_pagination分页

jquery pagination的使用

后台的主要任务是获取总记录数和列表数据,剩下的分页功能可以交给前台来做就可以了,感觉jquery pagination(http://github.com/gbirke/jquery_pagination)这个插件还不错,省心!建议详细参考官方文档来了解各个配置参数含义

1.java分页类Page

只需要知道当前页是多少,每页最多显示多少列表项,后台就可以返回列表项数据了,当然前台还需要总记录数.

package org.exam.domain;
import java.util.List;
public class Page<T> {
    private int currentPage=0;//从0开始算起,默认值是0
    private int recordsPerPage=10;//默认值是10
    private long totalRecords=0;
    private List<T> items;
    public int getCurrentPage() {
        return currentPage;
    }
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }
    public int getRecordsPerPage() {
        return recordsPerPage;
    }
    public void setRecordsPerPage(int recordsPerPage) {
        this.recordsPerPage = recordsPerPage;
    }
    public long getTotalRecords() {
        return totalRecords;
    }
    public void setTotalRecords(long totalRecords) {
        this.totalRecords = totalRecords;
    }
    public List<T> getItems() {
        return items;
    }
    public void setItems(List<T> items) {
        this.items = items;
    }
}

2.获取后台数据,即总记录数和列表项数据

    private Page<User> load(Page<User> page){
        //获取总计录数
        page.setTotalRecords(jdbcTemplate.queryForObject("select count(1) from user", Long.class));
        //获取分页列表项
        int currentPage=page.getCurrentPage(),recordsPerPage=page.getRecordsPerPage();
        List<User> items=jdbcTemplate.query("select * from user order by id limit ?,?",
                new BeanPropertyRowMapper<User>(User.class),currentPage*recordsPerPage,recordsPerPage);
        page.setItems(items);
        return page;
    }
    @RequestMapping(value = "/list")
    public String list(Page<User> page,Model model) {
        model.addAttribute("page",load(page));
        return "user/list";
    }
    @RequestMapping(value = "/getUsers")
    @ResponseBody
    public Page<User> getUsers(Page<User> page){
        return load(page);
    }

3.第一次打开页面,直接使用c标签完成列表项数据显示和使用pg.pagination(总记录数, 分页配置)完成分页显示(当然,需要引用的文件就不详述)

<div id="userList">
    <c:forEach items="${page.items}" var="item">
        <div>${item.id}--${item.username}--${item.password}--${item.height}</div>
    </c:forEach>
</div>
<div id="Pagination"></div>

<div style="clear: left;">
    <form method="get" action="#">
        <input type="text" size="3" id="inputPage"/>
        <button type="button" id="btnSet">OK</button>
    </form>
    <p>1.这里输入的页码在pagination内部做了校验,不能小于0或者大于最大页码数</p>
    <p>2.如果还要显示总页数,总计录数,就直接显示就可以了,这两项与这个控制没什么关联</p>
</div>
<script type="text/javascript"> //公共配置 var pageOpt = { prev_text:'前一页', next_text:'后一页', items_per_page:${page.recordsPerPage},//因为第一次获取的数据,并没有传这个每页的记录数过去,所以这里应从后台获取. num_display_entries:5 //,num_edge_entries:1 }; function pageSelectCallback(page_index, jq){ //对公共配置进行扩展,用于后台获取数据,用到两个参数:当前页和每页的记录数 var opt = $.extend(pageOpt,{ current_page:page_index, }); //通过ajax发请求获取数据来修改页面 $.getJSON( "getUsers", {"currentPage":opt.current_page,"recordsPerPage":opt.items_per_page}, function(page){ var userListHtml=''; for(var i=0;i<page.items.length;i++){ var item=page.items[i]; userListHtml+='<div>'+item.id+'--'+item.username+'--'+item.password+'--'+item.height+'</div>'; } $("#userList").empty().append(userListHtml); } ); return false; } $(document).ready(function(){ //初始化 var opt = $.extend(pageOpt,{ callback:pageSelectCallback, current_page:${page.currentPage} }); var pg=$("#Pagination"); pg.pagination(${page.totalRecords}, opt); //跳转按钮(利用pagination内部页码跳转功能) $('#btnSet').click(function(){ pg.trigger('setPage', parseInt($("#inputPage").val())-1); }); }); </script>

这里顺便加上了跳转页码功能.其中回调pageSelectCallback是点击页码执行的函数,觉得这里比较适合发送ajax请求了,放开上面的num_edge_entries注解,可以显示另外一种风格.

完整源码下载:http://download.csdn.net/detail/xiejx618/8963483