首页
所有分类
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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery插件懒加载的示例
Oct 24 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
请假条(31) 建议书(203) 倡议书(159) 感谢信(72) 责任书(145) 保证书(97) 评语(336) 活动总结(790) 寄语(276) 决心书(42)
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
laravel model 两表联查示例
2019/10/24 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue.js打包之后可能会遇到的坑！
2018/06/03 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
Python根据指定日期计算后n天，前n天是哪一天的方法
2018/05/29 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python MongoDB 插入数据时已存在则不执行，不存在则插入的解决方法
2019/09/24 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Champs Sports加拿大：北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
MADE法国：提供原创设计师家具
2018/09/18 全球购物
屈臣氏菲律宾官网：Watsons菲律宾
2020/06/30 全球购物
Java面试笔试题大全
2016/11/23 面试题
护士思想汇报
2014/01/12 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
节能宣传周活动总结
2014/05/08 职场文书
英语复习计划
2015/01/19 职场文书
工作汇报材料难写？方法都在这里了！
2019/07/01 职场文书