PageBar4.0分页控件

gitHub下载地址:

https://github.com/tianma3798/PageBar

/*
* 自定义 分页控件 url 传参,后台刷新模式
* 4.0
* 1.修改 组切换bug
* 2.添加绿色样式
* 3.修改已有样式,放弃方形显示原则
* 4.添加第一页、最后一页、数据总数、页面总数显示
* 5.添加 ‘bluePager’---小型蓝色
* 6.添加less问价样式编写
* 7.添加‘singleShow’ 属性
*/

1.蓝色小按钮

var pageOne = $('#pageOne').pageBar({
    pageIndex: '<%=pageIndex%>',
    pageSize: '<%=pageSize%>',
    recordCount: '<%=recordCount%>',
    showType:'bluePager',
    submitEvent: function (index) {
        goToIndex(index);
    }
});
//分页按钮事件
function goToIndex(index) {
    var loc = window.location;
    var url = 'http://' + loc.host + loc.pathname + '?pageIndex=' + index;
    location.href = url;
}

PageBar4.0分页控件_第1张图片

2.绿色中按钮

var pageOne = $('#pageOne').pageBar({
    pageIndex: '<%=pageIndex%>',
    pageSize: '<%=pageSize%>',
    recordCount: '<%=recordCount%>',
    showType: 'greenPager',
    submitEvent: function (index) {
        goToIndex(index);
    }
});
//分页按钮事件
function goToIndex(index) {
    var loc = window.location;
    var url = 'http://' + loc.host + loc.pathname + '?pageIndex=' + index;
    location.href = url;
}

PageBar4.0分页控件_第2张图片

3.黄色大按钮

var pageOne = $('#pageOne').pageBar({
    pageIndex: '<%=pageIndex%>',
    pageSize: '<%=pageSize%>',
    recordCount: '<%=recordCount%>',
    submitEvent: function (index) {
        goToIndex(index);
    }
});
//分页按钮事件
function goToIndex(index) {
    var loc = window.location;
    var url = 'http://' + loc.host + loc.pathname + '?pageIndex=' + index;
    location.href = url;
}

PageBar4.0分页控件_第3张图片




你可能感兴趣的:(PageBar4.0分页控件)