Bootstrapjquery.twbsPagination.js动态页码分页的示例分析
这篇文章主要为大家展示了“Bootstrap jquery.twbsPagination.js动态页码分页的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap jquery.twbsPagination.js动态页码分页的示例分析”这篇文章吧。
成都创新互联公司是一家以网络技术公司，为中小企业提供网站维护、做网站、成都网站建设、网站备案、服务器租用、空间域名、软件开发、小程序制作等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站服务热线：13518219792
Bootstrap风格的分页控件自适应的：
1.风格样式：
2.首先引入js文件jQuery.twbsPagination.js
3.html页面
4.初始化
// 初始化加载信息数据
function initUserlogData() {
//重置分页组件否则保留上次查询的，一般来说很多问题出现与这三行代码有关如：虽然数据正确但是页码不对仍然为上一次查询出的一致
$('#pagination-log').empty();
$('#pagination-log').removeData("twbs-pagination");
$('#pagination-log').unbind("page");
//将页面的数据容器制空
$("#messagebody").empty();
//设置默认当前页
var pagenow = 1;
//设置默认总页数
var totalPage = 1;
//设置默认可见页数
var visiblecount = 5;
//加载后台数据页面
function loaddata() {
$.ajax({
url : "/tqyh/showUserloginfo",
type : "post",
data : {
"currentpage" : pagenow
},
dataType : "json",
success : function(data) {
var htmlobj = "";
totalPage = data.page.totalPage;//将后台数据复制给总页数
totalcount = data.page.totalCount;
$("#userlogbody").empty();
$.each(data.userlog, function(index, userlog) {
htmlobj = htmlobj + ""
+ " | " + ""
+ userlog.toUserName + " | " + ""
+ userlog.fromUserName + " | " + ""
+ userlog.createTime + " | " + ""
+ userlog.eventType + " | " ;
if(userlog.eventType=="LOCATION"){
htmlobj = htmlobj + ""
+ " LOCATION | ";
}else{
htmlobj = htmlobj +""+ userlog.details + " | ";
};
htmlobj = htmlobj + "
";
$("#userlogbody").append(htmlobj);
htmlobj = "";
});
//后台总页数与可见页数比较如果小于可见页数则可见页数设置为总页数，
if (totalPage < visiblecount) {
visiblecount = totalPage;
}
$('#pagination-log').twbsPagination({
totalPages : totalPage,
visiblePages : visiblecount,
version : '1.1',
//页面点击时触发事件
onPageClick : function(event, page) {
// 将当前页数重置为page
pagenow = page
//调用后台获取数据函数加载点击的页码数据
loaddata();
}
});
},
error : function(e) {
alert("s数据访问失败")
}
});
}
//函数初始化是调用内部函数
loaddata();
};
6.后台的json数据返回就行
7.结果截图：
以上是“Bootstrap jquery.twbsPagination.js动态页码分页的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
标题名称：Bootstrapjquery.twbsPagination.js动态页码分页的示例分析
路径分享：
http://cdweb.net/article/igeege.html
