未加星标

ajax分页效果(bootstrap模态框)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

ajax分页效果图:

ajax分页效果(bootstrap模态框)

上干货:

/**
* 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;
}

}

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 删除
分页:12
转载请注明
本文标题:ajax分页效果(bootstrap模态框)
本站链接:http://www.codesec.net/view/530179.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(21)