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

程序员文章站 2022-04-09 16:09:50

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

本文实例讲述了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] );
}

上一篇： vue实现图片上传功能

下一篇： vue中实现图片压缩 file文件的方法

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

Yii2.0框架实现带分页的多条件搜索功能示例

bootstrap+jQuery实现的动态进度条功能示例

在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

ThinkPHP整合datatables实现服务端分页的示例代码

jquery 实现密码框的显示与隐藏示例代码

jQuery插件实现非常实用的tab栏切换功能【案例】

jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

jQuery实现的点击图片居中放大缩小功能示例

jQuery实现的简单排序功能示例【冒泡排序】