A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 叶夜葉 中级黑马   /  2019-7-12 08:00  /  1758 人查看  /  0 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 叶夜葉 于 2019-7-12 08:02 编辑

浅谈js分页的几种方法
转载自https://www.cnblogs.com/sxs161028/p/7126371.html
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法
1.自己纯手写分页
[size=13.3333px]更深入的去理解分页的意义如分页的原理,其实,尝试自己去写一些分页方法是再合适不过的了,可以封装成一个分页方法,但是呢,这里呢,我就写一下最简单的指定的分页方法 ,就不去封装了。就以下图为例:
[size=13.3333px]

[size=13.3333px]上图是个非常普通的分页。第一个文本框可以输入页码。点击Go去查询指定的页数。后面两个按钮分别是上一页和下一页。这里面就没有写第一页和最后一页了。以下是html和js代码段。写的比较繁琐,如果有好的建议还请多多指教
[HTML] 纯文本查看 复制代码
//html
<dl class="all_dl cleanfloat currendl">
                <dt><input type="text" value="0" data-page="1"> / <span data-pagecount="4">4页</span><a class="go">GO</a></dt>
                <dd>
                    <a class="prev"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
                    <a class="next"><i class="layui-icon" style="font-size: 16px; color: #cacaca;"> </i></a>
                </dd>
            </dl>
/*上一页*/
$(document).on("click", "a.prev", function () {

    var currentPage = $(this).parent().parent().find("dt input").val();
    var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');   
    if (allPage == 1) {
        layer.alert("已经是当前页了");
        return;
    }
    if (currentPage == 1) {
        layer.alert("已经是第一页了");
        return;
    }
    else {
        var all_prev = layer.load();
        var currentPage = parseInt(currentPage) - 1;
        saleStaffAll(currentPage);
        layer.close(all_prev);
    }

})
/*下一页*/
$(document).on("click", "a.next", function () {
    var currentPage = $(this).parent().parent().find("dt input").val();
    var allPage = $(this).parent().parent().find("dt span").attr('data-pagecount');
    if (allPage == 1) {
        layer.alert("已经是当前页了");
        return;
    }
    if (currentPage == allPage) {
        layer.alert("已经是最后一页了");
        return;
    }
    else {
        var all_next = layer.load();
        var currentPage = parseInt(currentPage) + 1;
        saleStaffAll(currentPage);//查询数据主体方法
        layer.close(all_next);
    }

})
/*数据Go*/
$(document).on("click", "dl.all_dl dt a.go", function () {
    var currentPage = $(this).parent().find("input").val();
    var allPage = $(this).parent().find("span").attr('data-pagecount');
    if (!(CheckNumber(currentPage))) {
        layer.alert("输入的数字不正确");
        return;
    }
    if (currentPage == allPage) {
        layer.alert("已经是当前页了");
        return;
    }
    if (parseInt(currentPage) > parseInt(allPage)) {
        layer.alert("页码不能大于总页数");
        return;
    }
    if (parseInt(currentPage) < parseInt(allPage)) {
        var all_pn = layer.load();
        saleStaffAll(currentPage);
        layer.close(all_pn);
        return;
    } else {
        layer.alert("您输入的页码数不正确");
        return;
    }

})
[size=13.3333px]2.用jquery pagination ajax分页插件 这个插件我已详细讲解过了,可以参考本链接[浅谈 jQurey Pagination Ajax 分页插件的使用
[size=13.3333px]3.layui的分页插件
[size=13.3333px]现在就我个人而言,比较喜欢用贤心的layui分页插件layui.laypage。那就大致讲一下如何使用。其实非常的简单便捷。
[size=13.3333px]   1).引入layui.css和layui.js
[size=13.3333px]   2).声明并初始化
[JavaScript] 纯文本查看 复制代码
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  laypage({
    cont: 'demo1'//容器。值支持id名、原生dom对象,jquery对象。
     skin: '#4985d7',//可以自定义容器的颜色
     pages: 10, //总页数
     curr: 1, //初始化当前页                                                      
      jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
              searchFun(keyword, obj.curr);//查询主体方法
          }
      }
  });
})
[size=13.3333px]3.以上的话,就可以看到一个非常实用的分页插件了。如下图
[size=13.3333px]

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马