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

网络编程 2024/11/16 佚名

3 1 2

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

呈现

html文件

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="/UploadFiles/2021-04-02/引入一个jquery文件，这里就不提供了">

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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

jQuery,分页插件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“jQuery实现的分页插件完整示例”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

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

小程序实现图片移动缩放效果

js实现时间日期校验

评论“jQuery实现的分页插件完整示例”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

小程序实现图片移动缩放效果

js实现时间日期校验

评论“jQuery实现的分页插件完整示例”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存