bootstrap-paginator实现分页效果（ajax请求后端数据实现分页）

//首先在html头部引入bootstrap-paginator.js

//在html的body中使用分页必须用<ul></ul>标签

//js代码（内容不同，但都要分页，注意函数封装代码）

//前端分页效果
var pageIndex = 1; //定义全局变量
var pageCount = 1; //定义全局变量
//var company = sessionStorage.getItem('companyId'); //从sessionstorage中获取用户名
//console.log(company);
var statusnum = 1; //自定义状态（初始状态为1）
getpagenum(' '); //页面初次打开调用函数
function getpagenum(url){
   var posturl = ' ';
   if(url == ' '){
       posturl = '/ams-admin/find-company-order/1/8'; //获取第一页数据
   }else{
       posturl = url;     // 翻页获取数据
   };
   $('.tables-detail').html(" ");
$.ajax({
type:"GET",
async:true,
url:posturl,
data : { "":所传参数,"":所传参数},
success:function(data){
   console.log(data);
   pageIndex = data.pageIndex;     //获取后端分页数据赋值给pageIndex变量
   pageCount = data.pageCount; //获取后端分页数据赋值给pageCount变量
           if(data.pageInfos == null || data.pageInfos.length == 0){
               var $tableDetail = $('.tables-detail'); //如果数据为空则添加显示一张图片或背景
               var $imgs = $("<img class='orderimgs' src='/image/competUnits/wdd.png'>");
               $tableDetail.append($imgs);
               $("#pageration").css("display","none");
           }else{
                   $("#pageration").css("display","block");
                   if(statusnum == 1){     //根据状态调用不同的函数
                   waitfunhtml(data.pageInfos);
               };
               if(statusnum == 2){
                   waitgoodshtml(data.pageInfos);
               };
               initpage();
           }
},
   error:function(data){
//           console.log('获取推送信息产生异常:'+JSON.stringify(data));
       alert("数据获取失败");
   }
});
}

//分页静态样式显示
function initpage(){
   $('#pageration').bootstrapPaginator({
       currentPage: pageIndex, //调用函数initpage()将获取后端分页数据赋值给pageIndex变量
       totalPages: pageCount, //调用函数initpage()将获取后端分页数据赋值给pageIndex变量
   size:"normal",
   bootstrapMajorVersion: 3,
   alignment:"right",
   numberOfPages:5,
   itemTexts: function (type, page, current) {
   switch (type) {
   case "first": return "首页";
   case "prev": return "上一页";
   case "next": return "下一页";
   case "last": return "末页";
   case "page": return page;
//       case "first": return "<<";
//   case "prev": return "<";
//   case "next": return ">";
//   case "last": return ">>";
//   case "page": return page;
   }
   },
   onPageClicked: function (event, originalEvent, type, page){
   //给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
var url='/ams-admin/find-company-order/'+ page +'/8'; //后端接口
getpagenum(url); //调用函数子再次发送ajax请求
}
   });

}

//触发点击事件调用分页函数
$(document).on("click","#waitingorder",function(){
$(this).css({"border-bottom":"2px solid #ff0000",});
$(this).css({"border-bottom":"2px solid #ff0000",}).siblings().css({"border-bottom": "2px solid #cccccc"});
//分页接口调用
statusnum = 1; //根据状态调用相同的函数
getpagenum('');

})

////触发点击事件调用分页函数
   $(document).on("click","#delivergoods",function(){
       $(this).css({"border-bottom":"2px solid #ff0000",});
       $(this).css({"border-bottom":"2px solid #ff0000",}).siblings().css({"border-bottom": "2px solid #cccccc"});
//分页接口调用
       statusnum = 2;     //根据状态调用相同的函数
       getpagenum('');
   })

//获取后端数据渲染dom元素

function waitfunhtml(waitdata){
var $tablesDetail = $('.tables-detail');
$tablesDetail.html("");
var $tablewait = $('<table class="tablewait" >');
var $theadwait = '<thead>' +
'<tr>' +
'<th >商品名称</th>' +
'<th >商品单价</th>' +
'<th class="handle">商品数量</th>' +
'<th class="jinattr">商品属性</th>' +
'<th class="totalprice">商品金额</th>' +
'<th >后处理工艺</th>' +
'<th >派单时间</th>' +
'<th >操作</th>' +
'</tr>' +
'</thead>';
var $tbodywait = $('<tbody></tbody>');
$.each(waitdata,function(i,e){
   $("#waitnumi").text(i+1);
   //long时间转换调用转换
   var givetime = e.giveTime;
   var dategive = getSmpFormatDateByLong(givetime,true);

var $trwait = $('<tr>');
var $tdwait =
'<td dataname='+ e.id +'>' + e.name +'</td>' +
'<td >'+ e.proUnitPrice +'</td>' +
'<td class="handle">' + e.proQuantity + '</td>' +
'<td class="jinattr"><span>材料：'+ e.matName +'</span><span>颜色：'+ e.color +'</span><span>后期上色：'+ e.dealColor +'</span></td>' +
'<td class="totalprice">' + e.proCompanyPrice + '</td>' +
'<td >' + e.typeName +'</td>'+
'<td >' + dategive +'</td>'+
'<td >' +
'<a class="loads" data-appendfileid=' + e.appendFileId + ' href="javascript:void(0);">下载文档</a>' +
'<a class="model" modelid='+ e.id +' data-id='+ e.appendFileId +' data-sta='+ e.orderStatus +' href="javascript:void(0);" title="请先下载文档" disable="true">下载模型</a>' +
'<a class="lookmodel" data-refuseid='+ e.id +' data-refusesta='+ e.orderStatus +' href="javascript:void(0);">已拒订单</a>' +
'</td>';
$trwait.append($tdwait);
$tbodywait.append($trwait);
});
$tablewait.append($theadwait,$tbodywait);
$tablesDetail.append($tablewait);
}

//获取后端数据渲染至dom元素

bootstrap-paginator实现分页效果（ajax请求后端数据实现分页）

猜你喜欢