首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现的分页插件完整示例

Posted in jQuery onMay 26, 2020

本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考，具体如下：

呈现

jQuery实现的分页插件完整示例

html文件 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="引入一个jquery文件，这里就不提供了"></script>
        <link rel="stylesheet" href="引入下边提供的css文件" rel="external nofollow" >
    </head>
    <body>
        <div id="pages" class="devidePage" ></div>
    </body>
        <script>
            var pages=10; //计算出总页数(一定要是5的倍数)
            
            function getData(num){
                /*当前页数*/
                var currentPageNum = num;
                /*取数据*/
                $.ajax({
                type: "post",
                url: url, /*请求的servlet的地址*/
                data: {"currentPageNum":currentPageNum},
                cache: false,
                async : false,
                dataType: "json",
                success: function (data ,textStatus, jqXHR)
                {
                  if("true"==data.flag){
                      setData(data.data);
                  }else{
                    console.log("不合法！错误信息如下："+data.errorMsg);
                  }
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {   
                  console.log("请求失败！");
                }
                });
            }
            function setData(data){
                /*放数据*/
            }
        </script>
        <script src="引入下边提供的js文件"></script>
</html>

css文件

@charset "UTF-8";
/*分页所在的div*/
.devidePage{
    margin-top:300px;
    margin-left: 400px;
    height: 50px;
    width: 800px;
    /* background: gray; */
}
/*显示页数的div*/
.pages{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*首页*/
.theFirstPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*末页*/
.theLastPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*上一页*/
.prePage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*下一页*/
.nextPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*当前页数*/
.currentPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*总页数*/
.pageNums{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*输入页数*/
.jump{
    float:left;
    margin-left:2px;
    height:48px;
    width:50px;
    border:0.5px solid #EEEEEE;
}
/*跳转*/
.jumpClick{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}

js文件

/**
 * 侠 2018-8-15
 */
 
function loadAll() {
    var theFirstPage = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">首页</div>";
    var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上一页</div>";
    var pagess = "<div id=\"page_1\" class=\"pages\" οnclick=\"changePage(this.id)\">1</div>"
            + "<div id=\"page_2\" class=\"pages\" οnclick=\"changePage(this.id)\">2</div>"
            + "<div id=\"page_3\" class=\"pages\" οnclick=\"changePage(this.id)\">3</div>"
            + "<div id=\"page_4\" class=\"pages\" οnclick=\"changePage(this.id)\">4</div>"
            + "<div id=\"page_5\" class=\"pages\" οnclick=\"changePage(this.id)\">5</div>";
    var nextPage = "<div class=\"nextPage\" οnclick=\"nextPage()\">下一页</div>";
    var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末页</div>";
    var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>";
    var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages
            + "页</div>";
    var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" "
            +"οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\""
            +" οnblur=\"this.v();\">";
    var jumpClick = "<div class=\"jumpClick\" οnclick=\"jump()\">跳转</div>";
    $("#pages").html(theFirstPage +
            prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump
                    + jumpClick);
}
loadAll();
function defultBackground() {
    $("#page_1").css("background", "#66b2ff"); //配置选中颜色
}
defultBackground();
function changeBackground() {
    $(".pages").css("background", "#EEEEEE");  //配置默认颜色
    for (var i = 0; i < 5; i++) {
        if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1]
                .split("页")[0]) {
            $("#page_" + (i + 1)).css("background", "#66b2ff"); //配置选中颜色
            break;
        }
    }
}
function theFirstPage(){
    $('#currentPage').html("第" + 1 + "页");
    $("#page_1").html(1);
    $("#page_2").html(2);
    $("#page_3").html(3);
    $("#page_4").html(4);
    $("#page_5").html(5);
    changeBackground();
    getData(getCurrentPageNum());
}
function theLastPage(){
    $('#currentPage').html("第" + pages + "页");
    $("#page_1").html(pages-4);
    $("#page_2").html(pages-3);
    $("#page_3").html(pages-2);
    $("#page_4").html(pages-1);
    $("#page_5").html(pages);
    changeBackground();
    getData(getCurrentPageNum());
}
function changePage(id) {
    var pagenum = parseInt($("#" + id).text()) - 1;
    $('#currentPage').html("第" + $("#" + id).text() + "页");
    if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) {
        $("#page_1").html(parseInt($("#page_1").text()) - 1);
        $("#page_2").html(parseInt($("#page_2").text()) - 1);
        $("#page_3").html(parseInt($("#page_3").text()) - 1);
        $("#page_4").html(parseInt($("#page_4").text()) - 1);
        $("#page_5").html(parseInt($("#page_5").text()) - 1);
    }
    if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) {
        $("#page_1").html(parseInt($("#page_1").text()) + 1);
        $("#page_2").html(parseInt($("#page_2").text()) + 1);
        $("#page_3").html(parseInt($("#page_3").text()) + 1);
        $("#page_4").html(parseInt($("#page_4").text()) + 1);
        $("#page_5").html(parseInt($("#page_5").text()) + 1);
    }
    changeBackground();
    getData(getCurrentPageNum());
}
function prePage() {
    var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum > 1) {
        var toPageNum = currentPageNum - 1;
        $("#currentPage").html("第" + toPageNum + "页");
        if ((currentPageNum > 1) && ($("#page_1").text() != 1)) {
            $("#page_1").html(parseInt($("#page_1").text()) - 1);
            $("#page_2").html(parseInt($("#page_2").text()) - 1);
            $("#page_3").html(parseInt($("#page_3").text()) - 1);
            $("#page_4").html(parseInt($("#page_4").text()) - 1);
            $("#page_5").html(parseInt($("#page_5").text()) - 1);
        }
        changeBackground();
        getData(getCurrentPageNum());
    } else {
    }
}
function nextPage() {
    var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum < pages) {
        var toPageNum = currentPageNum + 1;
        $("#currentPage").html("第" + toPageNum + "页");
        if (currentPageNum >= 5 && ($("#page_5").text() != pages)) {
            $("#page_1").html(parseInt($("#page_1").text()) + 1);
            $("#page_2").html(parseInt($("#page_2").text()) + 1);
            $("#page_3").html(parseInt($("#page_3").text()) + 1);
            $("#page_4").html(parseInt($("#page_4").text()) + 1);
            $("#page_5").html(parseInt($("#page_5").text()) + 1);
        }
        changeBackground();
        getData(getCurrentPageNum());
    } else {
    }
}
function jump() {
    var numstr = $("#jump").val();
    var num = parseInt(numstr);
    if ((num < 1) || (num > pages)) {
        alert("输入不合法");
        $("#jump").val(1);
    } else {
        $("#currentPage").html("第" + num + "页");
        if (num >= 5) {
            $("#page_5").html(num);
            $("#page_4").html(num - 1);
            $("#page_3").html(num - 2);
            $("#page_2").html(num - 3);
            $("#page_1").html(num - 4);
        } else {
            if (num = 4) {
                $("#page_5").html(num + 1);
                $("#page_4").html(num);
                $("#page_3").html(num - 1);
                $("#page_2").html(num - 2);
                $("#page_1").html(num - 3);
            }
            if (num = 3) {
                $("#page_5").html(num + 2);
                $("#page_4").html(num + 1);
                $("#page_3").html(num);
                $("#page_2").html(num - 1);
                $("#page_1").html(num - 2);
            }
            if (num = 2) {
                $("#page_5").html(num + 3);
                $("#page_4").html(num + 2);
                $("#page_3").html(num + 1);
                $("#page_2").html(num);
                $("#page_1").html(num - 1);
            }
            if (num = 1) {
                $("#page_5").html(num + 4);
                $("#page_4").html(num + 3);
                $("#page_3").html(num + 2);
                $("#page_2").html(num + 1);
                $("#page_1").html(num);
            }
        }
        changeBackground();
        getData(getCurrentPageNum());
    }
}
function getCurrentPageNum(){
    return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] );
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现的分页插件完整示例

- Author -

Z_DZ

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
AE3805(1) PR-D3L(1) 纸巾盒(1) SRF-40W(1) 德生G88(1) ICF-F10(1) 华普R-96(1) 德生1994(1) ICF-SW100(1) SRF-22W(1)
You might like
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
header导出Excel应用示例
2014/01/24 PHP
变量在 PHP7 内部的实现（一）
2015/12/21 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
js 幻灯片的实现
2011/12/06 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python中实现远程调用（RPC、RMI）简单例子
2014/04/28 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python的Lambda函数用法详解
2019/09/03 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
JENNIFER BEHR官网：各种耳环和发饰
2020/06/07 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
优秀团队获奖感言
2014/02/19 职场文书
机关出纳岗位职责
2014/04/03 职场文书
公司委托书范本
2014/04/04 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
学校开学标语
2014/10/06 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
学校捐款活动总结
2015/05/09 职场文书