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>


使用搜索页数按键

<html>

         <div style="display: inline-block;float: right;margin-left:20px;">到第<input id="pageSear" type="number" style="width:40px;margin:0 5px;border:1px solid rgb(221,221,221);border-radius: 3px;padding:3px;">页
                  <button id="searchPage" style="background-color:#46c1a6;color:#fff;border:none;border-radius: 3px;padding:4px">确定</button>
         </div>

</html>



<script>

//搜索页数
$("#searchPage").click(function(){
var pageSear =$("#pageSear").val();
if(pageSear>0&&pageSear<totalPages+1){
var pageDatas ={
limit:limit,
offset:(pageSear-1)*limit
}

//input的传入的值，然后使用ajax刷新
$.ajax({
type:"get",
url:"/api/query_lessons",
async:true,
data:pageDatas,
success:function(result){
if(result.code==0){
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) ;

//bootstrap属性，可以让某一个按钮属于击中状态
$('#bp-element').bootstrapPaginator("show",pageSear)
}
}
});
}
else{
alert("您输入的页数不正确");
}
})


})

</script>