jQuery分页源码

最新推荐文章于 2022-11-10 08:39:30 发布

韦裤布被

最新推荐文章于 2022-11-10 08:39:30 发布

阅读量174

点赞数 1

分类专栏：前端文章标签： jQuery 分页模型

本文链接：https://blog.csdn.net/qq_42826164/article/details/91349605

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

为方便朋友理解分页,特地给她用jQuery写个分页模型;
样式可自行调整,若需要跳转页面或其它功能,就自行增加了;
话不多说,直接上码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分页</title>
</head>
<style type="text/css">
    #pagerForm {background: #FFFFFF}
    .pagination {
        padding: 5px;
        font-size:14px
    }
    .pagination a, .pagination a:link, .pagination a:visited {
        padding:10px 16px;
        margin:2px;
        border:1px solid #3E90F7;
        border-radius: 4px!important;
        text-decoration:none;
        color:#3E90F7
    }
    .pagination a:hover, .pagination a:active {
        background: #3E90F7;
        color: #FFFFFF;
        border: 1px solid #3E90F7;
        border-radius:4px !important;
        text-decoration: none
    }
    .pagination span.current{
        padding: 10px 16px;
        margin: 2px;
        border: 1px solid #3E90F7;
        border-radius:4px !important;
        font-weight: bold;
        background-color: #3E90F7;
        color: #FFFFFF
    }
    .pagination span.disabled {
        padding: 10px 16px;
        margin: 2px;
        border: 1px solid #eee;
        border-radius: 4px !important;
        color: #ddd
    }
    #select {
        padding: 5px 0px;
        border: 1px solid rgba(228, 228, 228, 1);
        border-radius:4px !important
    }
</style>
<body>
    <div class="pagination">
        <form id="pagerForm">
        </form >
    </div> 
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>   
<script>
    var pageIndex=1;
    var pageSize=10;
    var pageCount=100;

    window.runPage=function runPage(pageIndex,pageSize,pageCount){
        var start = 1;
        var end = pageIndex + 1;

        //页号越界处理
        if (pageIndex > pageCount) {
            pageIndex = pageCoun;
        }
        if (pageIndex < 1) {
            pageIndex = 1;
        }

        //上一页处理
        var disabled;
        if(pageIndex == 1){
            disabled=$('<span class="disabled">上一页</span>');
        }else{
            disabled=$('<a href="javascript:void(0);" onclick="toPage('+(pageIndex-1)+')">上一页</a>');
        }
        disabled.appendTo('#pagerForm');

        //如果前面页数过多,显示...
        if (pageIndex > 4) {
            start = pageIndex - 1;
            var a1 = $('<a href="javascript:void(0);" onclick="toPage(1)">1</a>');
            var a2 = $('<a href="javascript:void(0);" onclick="toPage(2)">2</a>&hellip;');
            a1.appendTo('#pagerForm');
            a2.appendTo('#pagerForm');
            var i1 = $('<i> ... </i>');
            i1.appendTo('#pagerForm');
        }

        //显示当前页号和它附近的页号
        if(end> pageCount){
            end=pageCount;
        }
        for (var i = start;i <= end; i++) {
            if (pageIndex == i) {
                var current = $('<span class="current">' + i + '</span>');
                current.appendTo('#pagerForm');
            } else {
                var noCurrent = $('<a href="javascript:void(0);" onclick="toPage(' + i + ')">' + i + '</a>');
                noCurrent.appendTo('#pagerForm');
            }
        }

        //如果后面页数过多,显示...
        if (end < pageCount - 2) {
            var i2 = $('<i> ... </i>');
            i2.appendTo('#pagerForm');
        }

        if (end < pageCount - 1) {
            var a3 = $('<a href="javascript:void(0);" onclick="toPage(' + (pageCount - 1) + ')">' + (pageCount - 1) + '</a>');
            a3.appendTo('#pagerForm');
        }

        if (end < pageCount) {
            var a4 = $('<a href="javascript:void(0);" onclick="toPage(' + pageCount + ')">' + pageCount + '</a>');
            a4.appendTo('#pagerForm');
        }

        var lastSpan;
        if (pageIndex == pageCount) {
            lastSpan = $('<span class="disabled">下一页</span>');
        } else {
            lastSpan = $('<a href="javascript:void(0);" onclick="toPage(' + (pageIndex + 1) + ')">下一页</a>');
        }
        lastSpan.appendTo('#pagerForm');
    }

    runPage(pageIndex, pageSize, pageCount);

    function toPage(index){
	    //获取当前页码
        $('#pagerForm').text('');
	    pageIndex=index;
        runPage(pageIndex, pageSize, pageCount);

	    // 设置表单请求的URL地址
	    // $("#pagerForm").action="${toURL}";
	    // 表单提交
	    // $("#pagerForm").submit();
	  }
</script>
</html>

韦裤布被

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery分页源码

为方便朋友理解分页,特地给她用jQuery写个分页模型;样式可自行调整,若需要跳转页面或其它功能,就自行增加了;话不多说,直接上码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
复制链接

扫一扫

专栏目录