js 分页插件(jQuery)

最新推荐文章于 2024-08-10 07:41:08 发布
最新推荐文章于 2024-08-10 07:41:08 发布
阅读量1k 收藏 2
点赞数
分类专栏： 前端 文章标签： jquery js
原文链接：https://www.mk2048.com/blog/blog.php?id=hai2jhi2cakj&title=js+%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%28jQuery%29
版权

参考：http://www.jb51.net/article/117191.htm 侵删

css 部分

@charset "utf=8";
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
.page{
 font-size: 13px;
 text-align: center;
 margin-top: 20px;
}
.page .page_to{
 display: inline-block;
 max-width: 250px;
}
.page .page_to li{
 display: inline-block;
 width: auto;
 height: auto;
 border: 1px solid #ddd;
 padding:5px 10px;
 border-left-width: 0;
 color: #323232;
 cursor: pointer;
}
.page .page_to li.page_hide{
 display: none;
}
.page .page_to li:hover{
 color: #32C2CD;
 background-color: #f4f4f4;
 border-color: #DDDDDD;
}
.page .page_to li:first-child{
 border-left-width: 1px;
}
.page .page_jump{
 display: inline-block;
 width: 180px;
}
.page .page_jump input.page_jump_input{
 width: 52px;
 height: 28px;
 text-align: center;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
 margin:0 4px;
}
.page .page_jump input.page_jump_btn{
 display: inline-block;
 padding: 2px 10px;
 margin-left: 5px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 /*vertical-align: middle;*/
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 border: 1px solid transparent;
 border-radius: 4px;
 background-color: #32c5d2;
 color: #FFFFFF;
 font-weight: bold;
}

js 部分

(function($, window, undefined) {

    var curPage = '',
        //跳转是否有值
        jumpVal = '',
        //从DOM中重新获取数据总数/总页数
        lists = '',
        totals = '',
        //是否返回值
        isTrue = false;

    var Page = function(opts) {
        this.settings = $.extend({}, Page.defaults, opts);
        curPage = this.settings.initPage;
        totals = this.settings.totalPages;
        jumpVal = this.settings.inputVal;
        this.init();
    };

    //默认配置
    Page.defaults = {
        container: '.page',
        setPos: 'body',
        totalPages: null,
        totalLists: null,
        initPage: 1,
        inputVal: 1,
        callBack: null
    };

    Page.prototype = {
        init: function() {
            this.create();
        },
        create: function() {
            var _template = '<div class="page">'  
                '<span class="page_details">'  
                '共<span class="page_num">'   this.settings.totalLists   '</span>条记录，'  
                '第<span class="page_current">'   curPage   '</span>/'  
                '<span class="page_size">'   this.settings.totalPages   '</span>页'  
                '</span>'  
                '<div class="page_to">'  
                '<ul class="flex_parent">'  
                '<li class="page_first flex_child">首页</li>'  
                '<li class="page_pre page_hide flex_child">« 上一页</li>'  
                '<li class="page_next flex_child">下一页 »</li>'  
                '<li class="page_last flex_child">末页</li>'  
                '</ul>'  
                '</div>'  
                '<div class="page_jump">'  
                '<span>第：<input type="number" class="page_jump_input" value="'   this.settings.inputVal   '">页</span>'  
                '<input type="button" class="page_jump_btn" value="Go">'  
                '</div>'  
                '</div>';
            $(this.settings.setPos).append(_template);
            this.refreshDom();
            this.bindEvent();
        },
        bindEvent: function() {
            var _this = this;
            //跳转首页
            $(this.settings.container).on("click", ".page_first", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = 1;
                    isTrue = _this.settings.callBack(1);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(1);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //跳转上一页
            $(this.settings.container).on("click", ".page_pre", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage > 1) {
                        curPage = curPage - 1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳转下一页
            $(this.settings.container).on("click", ".page_next", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();
                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage < totals) {
                        curPage = curPage   1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳转末页
            $(this.settings.container).on("click", ".page_last", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = totals;
                    isTrue = _this.settings.callBack(curPage);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(totals);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //Go跳转
            $(this.settings.container).on("click", ".page_jump_btn", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val());
                    // console.log('跳转的页数：'   jumpVal   ';跳转之前的页数：'   curPage);
                    isTrue = _this.settings.callBack(jumpVal);
                    if (jumpVal >= 1 && jumpVal <= totals) {
                        curPage = jumpVal;
                        // isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    } else {
                        jumpVal = curPage;
                    }
                }
            });
        },
        refreshDom: function() {
            $(this.settings.container).find("li.flex_child").removeClass("page_hide");
            if (Number(totals) == 1) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
                $(this.settings.container).find(".page_next").addClass("page_hide");
            } else if (Number(totals) == 2) {
                if (Number(curPage) == 1) {
                    $(this.settings.container).find(".page_pre").addClass("page_hide");
                } else {
                    $(this.settings.container).find(".page_next").addClass("page_hide");
                }
            } else if (Number(curPage) == 1 && Number(totals) > 2) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
            } else if (Number(curPage) == Number(totals) && Number(totals) > 2) {
                $(this.settings.container).find(".page_next").addClass("page_hide");
            }
        }
    };

    var pageInit = function(opts) {
        return new Page(opts);
    };

    window.pageInit = $.pageInit = pageInit;

})(jQuery, window, undefined);

调用

function page(){
    $.pageInit({
        container: '.page', //容器：默认page
        setPos: '.pageBox', //放置位置：默认body
        totalPages: totalPages, //总页数：必填（后台返回的，加载列表可以取到）
        totalLists: totalCount, //数据总数：必填（后台返回的，加载列表可以取到）
        initPage: pageNo, //初始页码：默认1（后台会返回，自己也可以定义）
        inputVal: 1, //设置跳转的input值：默认1
        //要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行
        callBack: function(n) {
            var flag = true;
　　　　　　　console.log(n);
            getCustomerList(n); //getCustomerList 是加载列表的方法；n 为返回的页码数，
            return flag;
        }
    });
};

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
前端老码农
关注
专栏目录
js分页插件
愿世界和平
08-10 449
<link type="text/css" rel="stylesheet" href="${ctxStatic}/css/simplePagination.css" /> <!--分页插件 js--> <script type="text/javascript" src="${ctxStatic}/js/jquery.simplePagination
jquery分页插件jquery.pagination.js实现无刷新分页
10-22
在介绍使用jquery分页插件jquery.pagination.js实现无刷新分页的知识点之前，首先要明确什么是分页插件，以及无刷新分页的概念。分页插件是一种用于在网页上实现内容分页展示的工具，它能够将大量数据或内容分成多页...
js对象分页插件
11-27
解决对象传入遍历，并且实现模板标签替换，使用者无需再去模板中更改属性，只需要把对应的属性传递进去就可以了。适合于排行，数据展示之类的分页
自制Javascript分页插件，支持AJAX加载和URL带参跳转两种初始化方式，可用于同一页面的多个分页和不同页面的调用...
weixin_30672019的博客
07-24 291
闲话部分 最近闲着实在无聊，就做了点小东西练练手，由于原来一直在用AspNetPager进行分页，而且也进行了深度的定制与原有系统整合的也不错，不过毕竟是用别人的，想着看自己能试着做出来不能，后台的分页插件已经有比较成熟的了，那就自己试着写一个前台分页吧。 话不多说，先上效果图： 优点与缺点 来说说优缺点吧，首先AspNetPager是后台分页控件...
Vue.js 分页插件使用指南：vuejs-paginate
最新发布
gitblog_00205的博客
08-10 479
Vue.js 分页插件使用指南：vuejs-paginate vuejs-paginateA Vue.js(v2.x+) component for creating pagination.项目地址:https://gitcode.com/gh_mirrors/vu/vuejs-paginate 项目介绍 vuejs-paginate 是一个简洁的 Vue.js 分页组件，专为 Vue 2.0...
jquery分页插件
Admans的专栏
07-21 1644
* * * * jquery分页插件 * 1.0 zheng 2014-03-18 * 1.1 兼容url包含#号地址，GoToPage可以指定锚点（特殊需求）2014-04-10 09:00:34 * 1.2 可以配置分页条列出页面数 * 1.3 增加了页面码跳转功能 * $('#mypage').scPagination(555, { * pageSize: 10,//每页显示的记录条数 * myPagerCount:10,//分页条显示的页
JS分页插件
weixin_70227543的博客
05-19 1399
<body> <div class="box"></div> <script> function Page(classname, options={}){ //将参数定义成属性 this.options = options this.fn = this.options.fn || function(){} this.containe.
jQuery分页插件jquery.pagination.js使用方法解析
01-21
jquery.pagination.js插件，此jQuery插件为Ajax分页插件，一次性加载全部数据，故分页切换时无刷新与延迟，只是重写指定dom元素中的html内容，如果数据量较大不建议用此方法，因为加载会比较慢； jQuery的多数插件...
jQuery分页插件jQuery.pager.js
03-24
插件描述：表格分页，li分页.
jquery分页插件jquery.pagination.js使用方法解析
10-22
`jQuery.pagination.js`是一款强大的jQuery分页插件，由Gabriel Birke开发，它使得在网页上实现分页功能变得简单高效。以下是对这个插件的详细解释和使用方法： ### 插件安装与引入 首先，确保你已经在项目中引入...
分页js插件
01-10
博文 http://blog.csdn.net/qq_34273222/article/details/54312975 中所需要的资源文件，有问题请留言。
JS 分页插件page.js
04-13
比较基础的JS分页，基于jQuery的插件，写的不好，还望见谅。。
js分页插件（附上用法描述）
04-26
http://blog.csdn.net/xyl_ice/article/details/70808952
JavaScript小案例------js实现分页插件效果篇
前端叶荨，随手记
04-04 3872
原生js实现分页插件效果
封装个js分页插件
无极低码
04-20 372
【代码】封装个js分页插件。
JQuery实现异步分页插件教程
JQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理和AJAX交互等任务，因此利用JQuery构建异步分页插件是十分方便的。 首先，异步分页的核心在于通过AJAX请求获取不同页码的数据，而无需刷新整个页面。这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值