html部分代码
<html> <head> <!-- 分页样式核心文件 --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- 必须引用jquery.js --> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <!-- 分页用的核心文件 --> <script type="text/javascript" src="js/bootstrap-paginator.js"></script> </head> <body> <div> <!-- bootstrap.css文件版本为3及以上 --> <ul id='page'></ul> <!-- bootstrap.css文件版本为2 --> <!-- <div id='page'></div> --> </div> <body> </html>
javascript部分代码
var options = { bootstrapMajorVersion : 3, // bootstrap.css文件版本 currentPage : currentPage, // 当前页数 totalPages : totalPages, // 总页数 itemTexts : function (type, page, current) { switch (type) { case "first": return "首页"; case "prev": return "上一页"; case "next": return "下一页"; case "last": return "末页"; case "page": return page; } }, // 点击事件，用于通过ajax来刷新整个list列表 onPageClicked : function (event, originalEvent, type, page) { // 按分页从后台获取第 + page + 页的具体数据 } }; $('#page').bootstrapPaginator(options);