ajax分页效果（bootstrap模态框）

ajax分页效果图：

上干货：

/**
 * ajax分页
 */
$(function(){ 

 $(".modal-body").find(".pagination").on("click","li",function(){
 var totalPage=$(".modal-body").find(".pagination").find(".lilength").length;
 var pageNo=$(this).find("a").text();
 var beforePage="";
 //获取之前选中的值
 $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).hasClass("active")){
  beforePage=$(this).find("a").text();
  }
 });
 //alert(beforePage);
 if($(this).find("a").text()=="首页"){
  removeClass();
  $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).find("a").text()=="1"){
   $(this).addClass("active");
  }
  getPlanFy("1");
  });
 }else if($(this).find("a").text()=="上页"){
  if(beforePage==1){
  showMessage("已经是第一页了!")
  }else{
  var dqy=parseInt(beforePage)-1;
  $(".modal-body").find(".pagination").find("li").each(function(){
   if($(this).find("a").text()==dqy.toString()){
   $(this).addClass("active");
   }else{
   $(this).removeClass("active");
   }
  });
  getPlanFy(dqy);
  }
 }else if($(this).find("a").text()=="下页"){
  if(beforePage==totalPage){
  showMessage("已经是最后一页了!")
  }else{
  var dqy=parseInt(beforePage)+1;
  $(".modal-body").find(".pagination").find("li").each(function(){
   if($(this).find("a").text()==dqy.toString()){
   $(this).addClass("active");
   }else{
   $(this).removeClass("active");
   }
  });
  getPlanFy(dqy);
  }
 }else if($(this).find("a").text()=="末页"){
  removeClass();
  $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).find("a").text()==totalPage){
   $(this).addClass("active");
  }
  });
  getPlanFy(totalPage);
 }else{
  removeClass();
  $(this).addClass("active");
  getPlanFy(pageNo);
 }
 }); 

// $(".table").find("tbody").on("click",".showMsgDetail",function(){
// var msg=$(this).find("a").attr("name");
// showMagDetail(msg);
// }); 

 $(".addbutton").click(function(){
 $("#savePlanmodal").removeAttr("name");
 $("#planIdsUpdate").val("");
 });
}); 

/**
 * 弹窗
 */
function showMessage(content){
 $.alert({
  title: '提示',
  content: content,//支持html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  closeAnimation: 'zoom',
  buttons: {
  okay: {
   text: '确定',
   btnClass: 'btn-primary'
  }
  }
 });
} 

/**
 * 移除css
 */
function removeClass(){
 $(".modal-body").find(".pagination").find("li").each(function(){
 $(this).removeClass("active");
 });
} 

function getPlanFy(pageNo){
 var pageSize=10;
 $.post(""+otherPath+"/fault-studio/getInpectPlanList.action",
  {"pageNo":pageNo,"pageSize":pageSize},function(data){
   $("#inspectionPlan").find(".modal-body").find("table").find("tbody").html("");
   $("#inspectionPlan").find(".modal-body").find(".pagination").html("");
  var appendHtml="";
  if(data.items!=null && data.items.length>0){
  $.each(data.items,function(i,item){
   var number=parseInt(i)+1;
   appendHtml+="<tr>" +
    "<td align='center'>"+number+"</td>" +
    "<td><a>"+item[1]+"</a></td>" +
    "<td>"+item[2]+"</td>"+
    "<td>"+item[3]+"</td>"+
    "<td><a name='"+item[0]+"' onclick='updatePlan(this)'>修改</a> <a lang='"+item[0]+"' onclick='delPlan(this)'>删除</a></td>"
    "</tr>"
  });
  $("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);
  var paginHtml="";
  if(isNotTirmpagin(data.totalPage) && data.totalPage>0){
   paginHtml+="<li><a>首页</a></li>" +
    "<li><a>上页</a></li>";
   for(var j=0;j<data.totalPage;j++){
   var page=parseInt(j)+1;
   if(page==pageNo){
    paginHtml+="<li class='lilength active'><a>"+page+"</a></li>";
   }else{
    paginHtml+="<li class='lilength'><a>"+page+"</a></li>";
   } 

   }
   paginHtml+="<li><a>下页</a></li>" +
    "<li><a>末页</a></li>";
   $("#inspectionPlan").find(".modal-body").find(".pagination").append(paginHtml);
  }
  }
 });
} 

function updatePlan(obj){
 var planId=obj.name;
 $.post(""+otherPath+"/fault-studio/getPlanById.action",{"id":planId},function(data){
 if(data.result=="success"){
  $(".addbutton").click();
  var item=data.items;
  $("#planName").val(item.name);
  $("#planTitle").val(item.inspectTitle);
  $("#showTime").val(item.inspectTime);
  var module_name=item.module_name;
  var nameArray=module_name.split("&");
  var moudleIdArray=item.inspectContent.split("&");
  var nameHtml="";
  if(nameArray!=null && nameArray.length>0){
  for(var i=0;i<nameArray.length;i++){
   if(isNotTirmpagin(nameArray[i])){
   nameHtml+="<li id='"+moudleIdArray[i]+"'>"+nameArray[i]+"</li>";
   } 

  }
  }
  $(".inspectContent").append(nameHtml); 

  var inspectTimeArray=item.inspectTime.split("&");
  var timeHtml="";
  if(inspectTimeArray!=null && inspectTimeArray.length>0){
  for(var j=0;j<inspectTimeArray.length;j++){
   if(isNotTirmpagin(inspectTimeArray[j])){
   timeHtml+="<li>"+inspectTimeArray[j]+"</li>";
   } 

  }
  }
  $(".inspectionChooseTime").append(timeHtml);
  $("#savePlanmodal").attr("name","update");
  $("#planIdsUpdate").val(planId);
 }
 }); 

} 

function delPlan(obj){
 var planId=obj.lang;
 sureConfirm("提示","确定删除吗?",planId);
} 

function showMagDetail(msg){
 $.alert({
  title: '提示',
  content: msg,//支持html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  closeAnimation: 'zoom',
  buttons: {
  okay: {
   text: '确定',
   btnClass: 'btn-primary'
  }
  }
 });
} 

function sureConfirm(tip,msg,planId){ 

 $.confirm({
 title: tip,
 content: msg,
 icon: 'fa fa-rocket',
 animation: 'zoom',
 closeAnimation: 'zoom',
 buttons: {
  confirm: {
  text: '确定',
  btnClass: 'btn-primary',
  action:function(){
   $.post(""+otherPath+"/fault-studio/delInspectPlan.action",{"id":planId},function(data){
   if(data.items=="success"){
    showMagDetail("删除成功");
    getPlanFy("1");
   }else{
    showMagDetail(data.msg);
   }
   });
  }
  },
  cancle: {
  text: '取消',
  action:function(){
   return false;
  }
  }
 },
 }); 

} 

function isNotTirmpagin(obj){
 if(obj!=null && obj!='' && obj!=undefined){
 return true;
 }else{
 return false;
 } 

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。