管理系统分页 聚合函数 jquery分页插件 jqPaginator的使用

管理系统分页

为后台管理系统做分页的效果 更加方便查询和显示数据 开始使用的原始的方法 实现原理
后面使用了jquery下面的jqPaginator的方法 使样式和功能更加的完善

聚合函数

• sum(column_name) 求和
• avg(column_name) 求平均值
• max(column_name) 求最大值
• min(column_name) 求最小值
• round(column_name) 求去小数
• count(column_name) 求记录条数

分页

• 实现原理
  客服端输入页号，服务端根据页号得到分页limit子距偏移量，确定每页查询记录条数，返回查询该页记录

currentNo = 1;//页号
pageSize = 10;//每页记录条数
start = (currentNo-1)*pageSize;//偏移量
//SQL语句
SELECT id,username,password
FROM user
LIMIT start,pageSize

• 上一页与下一页边界检查
  上一页检查

if(--currentNo === 0){
    currentNo = 1
}

下一页检查

if(++currentNo > 总页数){
     currentNo = 总页数

求总页数

//总记录条数 % 每页记录数 === 0   页数 = 总记录条数/每页记录数
//总记录条数 % 每页记录数 ！== 0   页数 = 总记录条数/每页记录数+1
totalNum = SELECT COUNT(*) FROM user;//总记录数
var pageNum = 0;//总页数
if(totalNum % pageSize === 0){
        pageNum = parseInt(totalNo / pageSize);
    }else{
        pageNum = parseInt(totalNo / pageSize +1);
}

jquery分页插件 jqPaginator

• 调用样式class名称

<div class="pagination" id="pagination2"></div>

• 引入jquery和jqPaginator包

<script>window.jQuery || document.write('<script src="http://localhost:8088/js/jquery.js"><\/script>')</script>
    <script type="text/javascript" src="http://localhost:8088/js/jqPaginator.js"></script>

• 调用数据

<script>
        var totalPageNum =  '<%= pagesNum %>'; // 总页数
        var currentNo = '<%=currenNo%>'; // 当前页数在js代码中获取渲染数据
        $.jqPaginator('#pagination2', {
	        totalPages: parseInt(totalPageNum),
	        visiblePages: 2,
	        currentPage: parseInt(currentNo),
	        first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
	        prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
	        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
          last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
          page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
          onPageChange: function (num, type) {
            if(type === 'change'){
              window.location.href='http://localhost:8088/user/list?pageNo='+num;
            }
          }
	    });
    </script>

参数