jqPaginator(jQuery的分页组件)

最新推荐文章于 2024-07-31 17:07:58 发布

积累jiuduo

最新推荐文章于 2024-07-31 17:07:58 发布

阅读量1.2k

点赞数

分类专栏： jsp-js-js插件文章标签： jqPaginator

jsp-js-js插件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上自己的代码吧

<%@ page language="java" pageEncoding="utf-8"%>

<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<link href="${ctx}/plugins/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/styles/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${ctx}/styles/js/jqPaginator.js" type="text/javascript"></script>
</head>
<body style="padding:10px;">
    
    <div>
       <table id="list" border="1"></table>
    </div>
    <ul class="pagination" id="pagination1"></ul>
    
   
</body>
</html>
<script type="text/javascript">
    $.jqPaginator('#pagination1', {
        totalPages: 1,
        visiblePages: 10,
        currentPage: 1,
        onPageChange: function (num, type) {
            $.get('/admin/test/list', { 'page': num }, function (returnData) {
               var list = returnData.rows, htmlcontent = '';
               $.each(list, function (index, item) { //遍历返回的json
                   htmlcontent+= '<tr><td>' + item.id + '</td>';
                   htmlcontent+= '<td>' + item.title + '</td>';
                   htmlcontent+= '<td>' + item.content + '</td>';
                   htmlcontent+= '<td><button class="btn btn-warning" οnclick="Edit(' + item.Id + ' );">修改</button>';
                   htmlcontent+= '<button class="btn btn-warning" οnclick="Edit(' + item.Id + ' );">删除</button></td></tr>';
               });//each end
               $("#list").empty().append(htmlcontent);
               $('#pagination1').jqPaginator('option', {
                   totalPages: returnData.totalPage,
                   visiblePages: returnData.pageSize,//每页记录条数
                   currentPage: returnData.currPage
                  });
            })
        }
    });
    /* $.jqPaginator('#pagination2', {//这种方式我没有尝试应该一样
        totalPages: 100,
        visiblePages: 10,
        currentPage: 3,
        prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',
        next: '<li class="next"><a href="javascript:;">Next</a></li>',
        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
        onPageChange: function (num, type) {
            $('#p2').text(type + '：' + num);
        }
    }); */

</script>

后台代码springmvc

@RequestMapping(value="/list", method = RequestMethod.GET)
   public ResponseEntity<PageResult> queryList1(
           @RequestParam(value = "page", defaultValue = "1") Integer page,
           @RequestParam(value = "rows", defaultValue = "10") Integer rows,
           @RequestParam(required=false) String param) {
       try {
           //传入json查询
           JSONObject jSonObject = null;
           if(StringUtils.isNotBlank(param)){
               param = new String(param.getBytes("iso-8859-1"),"UTF-8");
               if (LOGGER.isDebugEnabled()) {
                   LOGGER.debug(">>>>>>>>>>>查询合作列表， page = {}，param = {}", page, param);
               }
               jSonObject = JSONObject.fromObject(param);
           }


           if (LOGGER.isInfoEnabled()) {
               LOGGER.info(">>>>>>>>>>>条件查询对象， Cooperation = {}", jSonObject);
           }
           //查询分页结果
           PageResult pageResult = this.wkArticleService.queryParamsList(page, rows, jSonObject);
           //page:第几页，rows：一页多少条记录
           pageResult.setCurrPage(page);
           pageResult.setPageSize(rows);

           if (LOGGER.isDebugEnabled()) {
               LOGGER.debug(">>>>>>>>>>>查询列表成功， pageResult = {}", pageResult);
           }

           //返回结果
           return ResponseEntity.ok(pageResult);
       } catch (Exception e) {
           LOGGER.error(">>>>>>>>>>>查询列表失败! page="+page+"， rows="+rows, e);
       }
       //返回异常，出错 500
       return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
   }