Bootstrap Paginator分页插件使用示例

---恢复内容开始---

<script>
$(function(){
var limit=10;//每页显示的行数
var offset ="";
var pages ={
limit:limit,
offset:0
}
$.ajax({
type:"get",
url:"/api/query_lessons",
async:true,
data:pages,
success:function(result){
var datas =result.data.lessons;
var htmlStr="";
var total =result.data.total;
var totalPages = Math.ceil(total/limit);
for(var i=0;i<datas.length;i++){
htmlStr +="<tr><td>"+datas[i].id+"</td><td>"
+yearTime(datas[i].begin_time)+"-"+dayTime(datas[i].end_time)+"</td><td>"
+tryclass(datas[i].type.goods.istry)+"</td><td>"
+datas[i].title+"</td><td>"
+infoName(datas[i].teacher)+"</td><td>"
+datas[i].type.define_data.grade+"</td><td>"
+infoName(datas[i].students[0])+"</td>"
+"<td style=‘color:#3198c8;cursor: pointer;‘><span onclick=\"delCourse("+"\‘"+datas[i].id+"\‘"
+")\">取消</span><span style=‘margin-left:20px;‘ onclick=\"ppt_set("+"\‘"+datas[i].teacher+"\‘"+","+"\‘"+datas[i].id+"\‘"+")\">ppt设置</span></td></tr>";
}
$("#center_tbody").html(htmlStr) ;
$("#page_total").html(total);
var options = {
bootstrapMajorVersion: 3,
currentPage: 1,
totalPages: totalPages,
onPageClicked: function (event, originalEvent, type, page){
var pages ={
limit:limit,
offset:(page-1)*limit
}
$.ajax({
type:"get",
url:"/api/query_lessons",
async:true,
data:pages,
success:function(result){
if(result.code==0){
var datas =result.data.lessons;
var htmlStr="";
for(var i=0;i<datas.length;i++){
htmlStr +="<tr><td>"+datas[i].id+"</td><td>"
+yearTime(datas[i].begin_time)+"-"+dayTime(datas[i].end_time)+"</td><td>"
+tryclass(datas[i].type.goods.istry)+"</td><td>"
+datas[i].title+"</td><td>"
+infoName(datas[i].teacher)+"</td><td>"
+datas[i].type.define_data.grade+"</td><td>"
+infoName(datas[i].students[0])+"</td>"
+"<td style=‘color:#3198c8;cursor: pointer;‘><span onclick=\"delCourse("+"\‘"+datas[i].id+"\‘"
+")\">取消</span><span style=‘margin-left:20px;‘ onclick=\"ppt_set("+"\‘"+datas[i].teacher+"\‘"+","+"\‘"+datas[i].id+"\‘"+")\">ppt设置</span></td></tr>";
}
$("#center_tbody").html(htmlStr)
}
}
});
}
}
$(‘#bp-element‘).bootstrapPaginator(options);
}
});

})
</script>

---恢复内容结束---

<script>
$(function(){
var limit=10;//每页显示的行数
var offset ="";
var pages ={
limit:limit,
offset:0
}
$.ajax({
type:"get",
url:"/api/query_lessons",
async:true,
data:pages,
success:function(result){
var datas =result.data.lessons;
var htmlStr="";
var total =result.data.total;
var totalPages = Math.ceil(total/limit);
for(var i=0;i<datas.length;i++){
htmlStr +="<tr><td>"+datas[i].id+"</td><td>"
+yearTime(datas[i].begin_time)+"-"+dayTime(datas[i].end_time)+"</td><td>"
+tryclass(datas[i].type.goods.istry)+"</td><td>"
+datas[i].title+"</td><td>"
+infoName(datas[i].teacher)+"</td><td>"
+datas[i].type.define_data.grade+"</td><td>"
+infoName(datas[i].students[0])+"</td>"
+"<td style=‘color:#3198c8;cursor: pointer;‘><span onclick=\"delCourse("+"\‘"+datas[i].id+"\‘"
+")\">取消</span><span style=‘margin-left:20px;‘ onclick=\"ppt_set("+"\‘"+datas[i].teacher+"\‘"+","+"\‘"+datas[i].id+"\‘"+")\">ppt设置</span></td></tr>";
}
$("#center_tbody").html(htmlStr) ;
$("#page_total").html(total);
var options = {
bootstrapMajorVersion: 3,
currentPage: 1,
totalPages: totalPages,
onPageClicked: function (event, originalEvent, type, page){
var pages ={
limit:limit,
offset:(page-1)*limit
}
$.ajax({
type:"get",
url:"/api/query_lessons",
async:true,
data:pages,
success:function(result){
if(result.code==0){
var datas =result.data.lessons;
var htmlStr="";
for(var i=0;i<datas.length;i++){
htmlStr +="<tr><td>"+datas[i].id+"</td><td>"
+yearTime(datas[i].begin_time)+"-"+dayTime(datas[i].end_time)+"</td><td>"
+tryclass(datas[i].type.goods.istry)+"</td><td>"
+datas[i].title+"</td><td>"
+infoName(datas[i].teacher)+"</td><td>"
+datas[i].type.define_data.grade+"</td><td>"
+infoName(datas[i].students[0])+"</td>"
+"<td style=‘color:#3198c8;cursor: pointer;‘><span onclick=\"delCourse("+"\‘"+datas[i].id+"\‘"
+")\">取消</span><span style=‘margin-left:20px;‘ onclick=\"ppt_set("+"\‘"+datas[i].teacher+"\‘"+","+"\‘"+datas[i].id+"\‘"+")\">ppt设置</span></td></tr>";
}
$("#center_tbody").html(htmlStr)
}
}
});
}
}
$(‘#bp-element‘).bootstrapPaginator(options);
}
});

})
</script>

<html>

    <ul id=‘bp-element‘ style="display:inline-block;float:right;">ul</ul>

</html>

需要引入

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

Bootstrap Paginator分页插件使用示例

原文：http://www.cnblogs.com/yicho/p/6928523.html