ajax分页效果(bootstrap模态框)

前端之家收集整理的这篇文章主要介绍了ajax分页效果(bootstrap模态框)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajax分页效果图:

上干货:

$(".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>" +
""+number+"</td>" +
"<td>"+item[1]+"</td>" +
"<td>"+item[2]+"</td>"+
"<td>"+item[3]+"</td>"+
"<td>修改 删除</td>"
"</tr>"
});
$("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);
var paginHtml="";
if(isNotTirmpagin(data.totalPage) && data.totalPage>0){
paginHtml+="

  • 首页
  • " +
    "
  • 上页
  • ";
    for(var j=0;j<data.totalPage;j++){
    var page=parseInt(j)+1;
    if(page==pageNo){
    paginHtml+="
  • "+page+"
  • ";
    }else{
    paginHtml+="
  • "+page+"
  • ";
    }

    }
    paginHtml+="

  • 下页
  • " +
    "
  • 末页
  • ";
    $("#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+="

  • "+nameArray[i]+"
  • ";
    }

    }
    }
    $(".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+="

  • "+inspectTimeArray[j]+"
  • ";
    }

    }
    }
    $(".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,btnClass: 'btn-primary'
    }
    }
    });
    }

    function sureConfirm(tip,msg,planId){

    $.confirm({
    title: tip,icon: 'fa fa-rocket',buttons: {
    confirm: {
    text: '确定',btnClass: 'btn-primary',action:function(){
    $.post(""+otherPath+"/fault-studio/delInspectPlan.action",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;
    }

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/ajax/42154.html

    猜你在找的Ajax相关文章