JS写的分页_浮叶蓝空的博客

```javascript
/*使用方法*/
// createPaginate({
//     // 分页框名称
//     elename : "#page",
//     // 最后一页
//     lastpage : 10,
//     // 页码按钮数量
//     column_num : 5,
//     success:function(currPage){
//
//     }
// });
function createPaginate(conf,currPage = 1){
    // 分页框名称
    var page_frame_name = conf.elename;
    // 最后一页
    var last_page = conf.lastpage;
    // 页码按钮数量
    var column_num = conf.column_num;
    // 当前页码
    var curr_page = currPage;
    // 分页框架
    var page_frame = $(page_frame_name);
    // 页码最大增减量
    var max_fix = (column_num-1)/2;
    // 当前增减量
    var fix_item = 0-max_fix;
    page_frame.addClass('fp-paginate');
    page_frame.append("<span >第"+curr_page+"/"+last_page+"页</span>");
    page_frame.append("<a    href='javascript:void(0)'>首页</a>");
    if (curr_page - 1 > 0) {
        page_frame.append("<a    href='javascript:void(0)'>上一页</a>");
    }
    for (var i=0;i<column_num;i++)
    {
        if (fix_item < 0 && curr_page + fix_item > 0) {
            page_frame.append("<a    href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
        }
        if (0===fix_item) {
            page_frame.append("<a    href='javascript:void(0)' id='fp-currpage'>"+curr_page+"</a>");
        }
        if (fix_item > 0 && curr_page + fix_item <= last_page) {
            page_frame.append("<a    href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
        }
        fix_item++;
    }
    if (curr_page+1 <= last_page) {
        page_frame.append("<a    href='javascript:void(0)'>下一页</a>");
    }
    page_frame.append("<a    href='javascript:void(0)'>尾页</a>");
    page_frame.append("<i ></i><input type='text' id='fp-inp-goto'  placeholder='go' value='1'><button id='fp-btn-go' >跳转</button>");
    // 按钮监听
    $(page_frame_name).find("a").click(function(){
        var page_a = $(this);
        var btn_name = page_a.data('name');
        switch (btn_name){
            case 'page-number': curr_page = Number(page_a.html()); break;
            case 'page-first': curr_page = 1; break;
            case 'page-pre': curr_page = curr_page-1; break;
            case 'page-next': curr_page = curr_page+1; break;
            case 'page-last': curr_page = last_page; break;
        }
        conf.success(curr_page);
        page_frame.html('');
        createPaginate(conf,curr_page);
    });
    $(page_frame_name).find("#fp-btn-go").click(function() {
        curr_page = Number($("#fp-inp-goto").val());
        conf.success(curr_page);
        page_frame.html('');
        createPaginate(conf,curr_page);
    });
}
```

```javascript
/*翻页*/
.fp-paginate{width: 100%;height: 40px;font-size: 14px;color: #404040;}
.fp-span{margin-right: 5px;}
.fp-a{text-decoration: none;color:#404040;padding: 0 5px;border: 1px solid white;}
.fp-a:hover{color:black;border: 1px solid gray;}
.fp-currpage{background-color:#404040;color:white;}
.fp-inp-goto{width: 40px;border-radius: 3px;border: 1px solid gray;padding-left: 10px;outline: none;}
.fp-btn-go{background-color: white;border: 1px solid gray;border-radius: 3px;margin-left: 5px;}
.fp-btn-go:hover{background-color: #eee;border-radius: 3px;cursor: pointer;}
```

[![JS写的分页](http://www.milinger.com/image/201908/201908141811245470.png "JS写的分页")](https://www.milinger.com/a151.html "JS写的分页")

给浏览器持续响应内容

html滚动条

0人点赞