登录  /  注册
首页 > web前端 > js教程 > 正文

一个非常好用的前端分页js工具类

一个新手
发布: 2017-09-29 09:43:26
原创
1500人浏览过

分享自己封装的前端分页js工具类  下面是默认样式效果截图

可以随意更改js及css 很灵活

/**
* pageSize,  每页显示数
* pageIndex, 当前页数  
* pageCount  总页数
* url  连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
    var intPage = 7;  //数字显示
    var intBeginPage = 0;//开始的页数
    var intEndPage = 0;//结束的页数
    var intCrossPage = parseInt(intPage / 2); //显示的数字
    var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>";
    if (pageIndex > 1) {
        strPage = strPage + "<a class='pageNav' onclick='" + url + "(1," + pageSize + ")'><span>首页</span></a> ";
        strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex - 1) + "," + pageSize + ")'><span>上一页</span></a> ";
    }
    if (pageCount > intPage) {//总页数大于在页面显示的页数
        if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
            intBeginPage = pageCount - intPage + 1;
            intEndPage = pageCount;
        }
        else {
            if (pageIndex <= intPage - intCrossPage) {
                intBeginPage = 1;
                intEndPage = intPage;
            }
            else {
                intBeginPage = pageIndex - intCrossPage;
                intEndPage = pageIndex + intCrossPage;
            }
        }
    } else {
        intBeginPage = 1;
        intEndPage = pageCount;
    }
    if (pageCount > 0) {
        for (var i = intBeginPage; i <= intEndPage; i++) {
            {
                if (i == pageIndex) {//当前页
                    strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";
                }
                else {
                    strPage = strPage + " <a class='pageNav' onclick='" + url + "(" + i + "," + pageSize + ")' title='第" + i + "页'>" + i + "</a> ";
                }
            }
        }
    }
    if (pageIndex < pageCount) {
        strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex + 1) + "," + pageSize + ")'><span>下一页</span></a> ";
        strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + pageCount + "," + pageSize + ")'><span>尾页</span></a> ";
    }
    return strPage+"</div>";
}

<div class="paging">
            <div id="dvPager" class="page fr clearfix" style="margin: 10px 0 15px;"></div>
        </div>


 a{color:#000;text-decoration:none;}
  .clearfix:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;}
  .fr{float:none;}
  .page a{padding:6px 12px;border:1px solid #ddd;float:left;margin-left:-1px;color:#006dae;text-align:center;}
  .page a:hover{background:#ddd;}
  .page a.current{background:#006dae;color:#fff;border:1px solid #006dae;cursor: default;}
  .page .first{margin-right:10px;}
  .pageinfo{margin-left:10px;padding:6px 12px;border:1px solid #ddd;float:left;color:#006dae;text-align:center;}


下面是调用示例 ↓
function loadData(pageIndex,pageSize){
      $.ajax({
            contentType:"application/json;charset=utf-8", 
              url:'?pageNum='+pageIndex+'&pageSize='+pageSize,
              type:"POST",
              dataType:"json",
              success:function(result){
                if(null != result){
                 
                    )
                    var beginIndex = (pageIndex - 1) * pageSize;
                    var endIndex = pageIndex * pageSize - 1;
                    var pageCount = parseInt((result.totalRecords / pageSize)) + (result.totalRecords % pageSize ? 1 : 0);
                    $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'loadData'));
            }
    });
 } 

说明:
pager(pageSize, pageIndex, pageCount, 'XXX')该方法 最后传入的参数XXX 是调用js方法的名称
登录后复制

以上就是一个非常好用的前端分页js工具类 的详细内容,更多请关注php中文网其它相关文章!

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学