ajax分頁效果(bootstrap模態(tài)框)
更新時間:2017年01月23日 16:55:02 作者:Java軟件小白
這篇文章主要為大家詳細介紹了ajax分頁效果的實現(xiàn)方法,結(jié)合bootstrap模態(tài)框使用 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下
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("已經(jīng)是第一頁了!") }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("已經(jīng)是最后一頁了!") }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; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- Ajax讀取數(shù)據(jù)之分頁顯示篇實現(xiàn)代碼
- php,ajax實現(xiàn)分頁
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- 基于Jquery+Ajax+Json的高效分頁實現(xiàn)代碼
- jQuery DataTables插件自定義Ajax分頁實例解析
- php+ajax實現(xiàn)無刷新分頁的方法
相關(guān)文章
bootstrap datetimepicker 日期插件在火狐下出現(xiàn)一條報錯信息的原因分析及解決辦法
日期插件 bootstrap-datetimepicker 在火狐下出現(xiàn)一條報錯信息:TypeError: (intermediate value).toString(…).split(…)[1] is undefined.什么原因?qū)е碌哪?,下面小編給大家分享解決思路,需要的朋友參考下2017-03-03基于RequireJS和JQuery的模塊化編程日常問題解析
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程,感興趣的朋友一起學(xué)習(xí)吧2016-04-04document.selection.createRange方法與實例
document.selection.createRange() 根據(jù)當(dāng)前文字選擇返回 TextRange 對象,或根據(jù)控件選擇返回 ControlRange 對象2006-10-10