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

javascript 同时被 3 个专栏收录
9 篇文章 0 订阅
4 篇文章 0 订阅
4 篇文章 0 订阅

管理系统分页

为后台管理系统做分页的效果 更加方便查询和显示数据 开始使用的原始的方法 实现原理
后面使用了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>

参数
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值