页码js，支持ajax无刷新翻页

最新推荐文章于 2022-04-01 23:02:56 发布

HSay

最新推荐文章于 2022-04-01 23:02:56 发布

阅读量753

点赞数

分类专栏：前端js

本文链接：https://blog.csdn.net/shayudaye/article/details/17026015

版权

前端js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前阵子工作需要做一个支持ajax无刷新翻页的页码控件，在网上找了别人的例子修改的~（里面class神马的懒得去改了，直接简单写了下）下载链接~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="" />
<script type="text/javascript" src="http://www.csdn.net/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PageBar.js"></script>
<style type="text/css">
/*reset*/ 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px Arial, Tahoma, 宋体; color:#454545; }
button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-size:100%; }
h2, h3 { font-size:14px; }
button, input, select, textarea, label { vertical-align:middle; outline:none; }
img { vertical-align:top; border:none; display:inline-block; background:#fff url(/images/common/nopic.png) center no-repeat; }
ul, ol { list-style:none; }
a { text-decoration:none; color:#454545; vertical-align:baseline; cursor:pointer; }
a:hover { text-decoration:underline; color:#000; }
table { border-collapse:collapse; border-spacing:0; }
body { background:#ddd; word-wrap:break-word; word-break:break-all; _height:100%; }
.g-page{ margin:20px 0; }
.g-page a{ display:inline-block; height:28px; padding:0 8px; line-height:28px; margin:0 2px; background:#FAFAFA; border:1px solid #ccc; border-radius:3px; }
.g-page a.g-btn-cur,.g-page a:hover{ color:#fff; background:#E95A59; }
.g-lh-22{ line-height:22px !important; }
.g-ta-c{ text-align:center !important; }
.g-pr-10{ padding-right:10px !important; }
.g-input-text { height:23px; line-height:23px; border-width:1px; border-style:solid; border-color:#454545 #ccc #ccc #454545; padding-left:3px; }
.g-input-text:hover, .g-input-text.focus { background-color:#fffcc5; }
</style>
</head>
<body>
	<form id="page_form">
		<div class="g-page g-page2">
		        
		</div>
	</form>
<script type="text/javascript">
function setPageBar(page) {
    //设置分页信息
    var pageOptions = {
        AllowPaging: true,
        PageIndex: page,       //设置当前页码
        PageSize: 15,       //设置分页大小
        RecordCount: 1092,  //设置数据总数
        TotalPage: 73,      //设置总页数
        showPageCount: 4,
        onPageClick: function(pageIndex) {    //自定义您的翻页事件
            setPageBar(pageIndex+1);
            return false;
        }
    }
    //初始化分页栏
    $('.g-page').pageBar(pageOptions);
}

$(document).ready(function() {
    setPageBar(6);
})	
</script>
</body>
</html>

引入一个js文件

/**************************/  
//JQuery分页栏  
/**************************/  
$.fn.pageBar = function(options) {  
    var configs = {  
        PageIndex: 1,  
        PageSize: 15,  
        TotalPage: 0,  
        RecordCount: 0,  
        showPageCount: 4,  
        onPageClick: function(pageIndex) {  
            return false;   //默认的翻页事件  
        }  
    }  

    $.extend(configs, options);  
    var tmp = "",  
    i = 0,  
    j = 0,  
    a = 0,  
    b = 0,  
    totalpage = parseInt(configs.RecordCount / configs.PageSize);  
    totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage;  
    tmp += "<p class=\"g-arr-r g-lh-22\">找到<strong>" + configs.RecordCount + "</strong>条结果</p>";  
    tmp += "<p class=\"g-ta-c g-pr-10\">";  
    if (configs.PageIndex > 1) {  
        tmp += "<a title=\"上一页\" class=\"g-btn\">上一页</a>";  
    } else {  
        tmp += "";  
    }  
    tmp += "<a class=\"g-btn\">1</a>";  
    if (totalpage > configs.showPageCount + 1) {  
        if (configs.PageIndex <= configs.showPageCount) {  
            i = 2;  
            j = i + configs.showPageCount;  
            a = 1;  
        } else if (configs.PageIndex > totalpage - configs.showPageCount) {  
            i = totalpage - configs.showPageCount;  
            j = totalpage;  
            b = 1;  
        } else {  
            var k = parseInt((configs.showPageCount - 1) / 2);  
            i = configs.PageIndex - k;  
            j = configs.PageIndex + k + 1;  
            a = 1;  
            b = 1;  
            if ((configs.showPageCount - 1) % 2) {  
                i -= 1  
            }  
        }  
    }  
    else {  
        i = 2;  
        j = totalpage;  
    }  
    if (b) {  
        tmp += "...";  
    }  
    for (; i < j; i++) {  
        tmp += "<a class=\"g-btn\">" + i + "</a>";  
    }  
    if (a) {  
        tmp += " ... ";  
    }  
    if (totalpage > 1) {  
        tmp += "<a class=\"g-btn\">" + totalpage + "</a>";
    }  
    if (configs.PageIndex < totalpage) {  
        tmp += "<a title=\"下一页\" class=\"g-btn g-mr-10\">下一页</a>";  
    } else {  
        tmp += "";  
    }  
    tmp += "<span class=\"g-c-99\">到第</span><a>Go</a>";  
    tmp += "<input type=\"text\" maxlength=\"3\" class=\"g-input-text g-mlr-5 g-w-35 g-ta-c\" />";
    tmp += "<span class=\"g-c-99\">页</span>";
    tmp += "<a title=\"确定\" class=\"g-btn g-ml-10\">确定</a></span>";
    tmp += "<input type=\"submit\" value=\"确定\" style=\"display:none;\"  /></p>";
    var pager = this.html(tmp)  
    var index = pager.children().children('input')[0]  
    
    pager.children().children('a').click(function() {  
        var cls = $(this).attr('class');  
        var page = $(this).text();
        if ( page == '上一页') { 
            configs.onPageClick(configs.PageIndex - 2)   
        } else if (page == '下一页') { 
            configs.onPageClick(configs.PageIndex)   
        } else if (page == '确定') {  
            if (!isNaN(index.value)) {  
                var indexvalue = parseInt(index.value); 
                indexvalue = indexvalue < 1 ? 1 : indexvalue  
                indexvalue = indexvalue > totalpage ? totalpage : indexvalue  
                configs.onPageClick(indexvalue - 1)  
            }  
        } else {  
            if (cls != 'g-btn-cur') {  
                configs.onPageClick(parseInt(page) - 1)  
            }  
        }  
    }).each(function() {  
        var page = $(this).text();
        configs.PageIndex == parseInt(page) && $(this).addClass('g-btn-cur');
        /*if (configs.PageIndex == parseInt(page)) {  
            $(this).addClass('g-btn-cur')  
        }  */
    })  
}