利用ajax实现分页效果
在网页中看到的分页效果，想一下就点击分页中的内容的时候，然后调用ajax调出对应的数据，正确的显示在相应的标签内。
1.用html实现正确的样式和结构
2.采用jquery中的ajax调出数据。
需要向后台问的是接口，参数（当前哪一个，一页显示多少数据），其他的就是如果需要将数据区分开来，就是需要相对应的参数
不想看代码的话，我就只是说一下基本的思路吧：pageSize(一页显示几个)pageIndex（当前是第几页）
一正确显示
1执行ajax一开始的时候pageIndex=0或者=1表示第一页的数据。（等于几问你们组里的后台）在pageSize里面填写你需要一页显示几个数据，成功函数中就是你需要的数据
2获取需要分成几页
如果后台有一个字段表示的是总的数据的数量最好了，如果没有，你就先不设置pageSize这个，先获取到全部的数据的数量，然后将全部的数据的数量dataSum/一页显示几个数据pageSize;
这样你开始分页应该显示就正确了。
二点击页码
1.点击某一页的时候，将这个值赋值给pageIndex，调取ajax获取到这个页码的时候的数据。将成功函数中获取到的数据就是你需要的数据了
1 $(function(){ 2 //显示数据以及分页 3 var page=0; 4 var Npage=0; 5 var pageSize=4; 6 //获取数据 7 function getList(obj_result,obj_page,type,page,pageSize,options){ 8 $.ajax({ 9 url:'xxxx, 10 /*data:{ 11 flowType:type, 12 psPage:page+1, 13 psPageSize:pageSize, 14 },*/ 15 data:$.extend({ 16 flowType:type, 17 psPage:page+1, 18 psPageSize:pageSize, 19 },options), 20 dataType:'json', 21 async:false, 22 success:function(data){ 23 24 var result=data.flowList; 25 26 switch(type){ 27 case 1: 28 var total=data.privateFlowTotal;//总的数量 29 Npage=Math.ceil(total/pageSize);//总的页数 30 break; 31 case 2: 32 var total=data.publicFlowTotal;//总的数量 33 Npage=Math.ceil(total/pageSize);//总的页数 34 break; 35 default: 36 var total=data.myFlowTotal;//总的数量 37 Npage=Math.ceil(total/pageSize);//总的页数 38 break; 39 40 } 41 42 43 44 $("#"+obj_page+"").empty(); 45 for(var i=1;i<Npage+1;i++){ 46 var $li=$("<li class="+"page"+">"+i+"</li>"); 47 $("#"+obj_page+"").append($li); 48 } 49 50 $("#"+obj_result+"").empty(); 51 52 if(result.length>=pageSize){ 53 for(var i=0;i<pageSize;i++){ 54 var name=result[i].flowname==""?"名称":result[i].flowname; 55 var state=result[i].state; 56 switch(state){ 57 case 1: 58 state="已发布到私有云"; 59 break; 60 case 2: 61 state="已发布到共有云"; 62 break; 63 default: 64 state="未发布"; 65 break; 66 } 67 var time=result[i].sync; 68 time=UnixToDate(time/1000); 69 var $li=$("<li class='col-md-2'>" + 70 "<div class='front'>" + 71 "<p style='width:100%;'><img style='margin-top:30px' src='images/process-icon.png' alt='' class='process-icon'/></p>" + 72 "<span>"+name+"</span><p>状态："+state+"</p><p>时间："+time+"</p>" + 73 "</div>" + 74 "<div class='behind'>" + 75 "<a class='bd-btn edit-process'>编辑流程</a>" + 76 "<a class='bd-btn preview-process show-preview-layer'>预览流程</a>" + 77 "<div class='operate-list mt46'>" + 78 "<i class='operate-icons set-icon'></i>" + 79 "<i class='operate-icons issue02-icon'></i>" + 80 "<i class='operate-icons copy02-icon'></i>" + 81 "<i class='operate-icons del-icon'></i>" + 82 "</div>" + 83 "<a ><img src='images/user-pic.png' alt='' class='user-pic mt45'/></a>" + 84 "</div>" + 85 "</li>"); 86 $("#"+obj_result+"").append($li); 87 } 88 }else{ 89 for(var i=0;i<result.length;i++){ 90 var name=result[i].flowname==""?"名称":result[i].flowname; 91 var state=result[i].state; 92 switch(state){ 93 case 1: 94 state="已发布到私有云"; 95 break; 96 case 2: 97 state="已发布到共有云"; 98 break; 99 default: 100 state="未发布"; 101 break; 102 } 103 var time=result[i].sync; 104 time=UnixToDate(time/1000); 105 var $li=$("<li class='col-md-2'>" + 106 "<div class='front'>" + 107 "<p style='width:100%;'><img style='margin-top:30px' src='images/process-icon.png' alt='' class='process-icon'/></p>" + 108 "<span>"+name+"</span><p>状态："+state+"</p><p>时间："+time+"</p>" + 109 "</div>" + 110 "<div class='behind'>" + 111 "<a class='bd-btn edit-process'>编辑流程</a>" + 112 "<a class='bd-btn preview-process show-preview-layer'>预览流程</a>" + 113 "<div class='operate-list mt46'>" + 114 "<i class='operate-icons set-icon'></i>" + 115 "<i class='operate-icons issue02-icon'></i>" + 116 "<i class='operate-icons copy02-icon'></i>" + 117 "<i class='operate-icons del-icon'></i>" + 118 "</div>" + 119 "<a ><img src='images/user-pic.png' alt='' class='user-pic mt45'/></a>" + 120 "</div>" + 121 "</li>"); 122 $("#"+obj_result+"").append($li); 123 /*var $li=$("<li class="+"col-md-2"+"><div class="+"front"+"><p style="+"width:100%;"+"><img style="+"margin-top:30px"+" src="+"images/process-icon.png"+" alt="+""+" class="+"process-icon"+"/></p><span>"+name+"</span><p>状态："+state+"</p><p>时间："+time+"</p></div" + 124 ">" + 125 "<div class="+"behind"+"><a class="+"bd-btn edit-process"+">编辑流程</a><a class="+"bd-btn preview-process show-preview-layer"+">预览流程</a><div class="+"operate-list mt46"+"><i class="+"operate-icons set-icon"+"></i><i class="+"operate-icons issue02-icon"+"></i><i class="+"operate-icons copy02-icon"+"></i><i class="+"operate-icons del-icon"+"></i></div><a href="+"#"+"><img src="+"images/user-pic.png"+" alt="+""+" class="+"user-pic mt45"+"/></a></div></li>"); 126 $("#"+obj_result+"").append($li);*/ 127 128 } 129 } 130 131 } 132 }) 133 }; 134 //当前的 135 getList("myState0","Npage0",0,0,pageSize);// 136 clickPage("myState0","Npage0",0,"fa-search0","search0"); 137 clickPrev("myState0","Npage0","prev0",0,"fa-search0","search0"); 138 clickNext("myState0","Npage0","next0",0,"fa-search0","search0"); 139 search("myState0","Npage0",0,0,"fa-search0","search0"); 140 //共有的 141 getList("myState1","Npage1",1,0,pageSize); 142 clickPage("myState1","Npage1",1,"fa-search1","search1"); 143 clickPrev("myState1","Npage1","prev1",1,"fa-search1","search1"); 144 clickNext("myState1","Npage1","next1",1,"fa-search1","search1"); 145 search("myState1","Npage1",1,0,"fa-search1","search1"); 146 //私有的 147 getList("myState2","Npage2",2,0,pageSize); 148 clickPage("myState2","Npage2",2,"fa-search2","search2"); 149 clickPrev("myState2","Npage2","prev2",2,"fa-search2","search2"); 150 clickNext("myState2","Npage2","next2",2,"fa-search2","search2"); 151 search("myState2","Npage2",2,0,"fa-search2","search2"); 152 153 //点击确定的哪一分页 154 155 function clickPage(obj_result,obj_page,type,search_btn,search_text){ 156 $("#"+obj_page+"").on("click",".page",function(){ 157 page=$(this).text()-1; 158 search_result(obj_result,obj_page,type,page,pageSize,search_text); 159 /*getList(obj_result,obj_page,type,page,4,options);*/ 160 $("#"+obj_page+"").find("li").eq($(this).text()-1).css("background","#eee").siblings().css("background","#fff"); 161 }); 162 }; 163 //点击上一个 164 function clickPrev(obj_result,obj_page,obj_btn,type,search_btn,search_text){ 165 $("#"+obj_btn+"").click(function(){ 166 if(page<=0){ 167 page=1; 168 } 169 page=page-1; 170 search_result(obj_result,obj_page,type,page,pageSize,search_text); 171 $("#"+obj_page+"").find("li").eq(page).css("background","#eee").siblings().css("background","#fff"); 172 }); 173 return false; 174 }; 175 //点击下一个 176 function clickNext(obj_result,obj_page,obj_btn,type,search_btn,search_text){ 177 $("#"+obj_btn+"").click(function(){ 178 if(page>=Npage-2){ 179 page=Npage-2; 180 } 181 page=page+1; 182 183 search_result(obj_result,obj_page,type,page,pageSize,search_text); 184 $("#"+obj_page+"").find("li").eq(page).css("background","#eee").siblings().css("background","#fff"); 185 }); 186 }; 187 188 //搜索 189 function search(obj_result,obj_page,type,page,search_btn,search_text){ 190 $("."+search_btn+"").click(function(){ 191 search_result(obj_result,obj_page,type,page,4,search_text);//注意这块有个限制一页显示多少的数字 192 }); 193 }; 194 //出现搜索的结果 195 function search_result(obj_result,obj_page,type,page,pageSize,search_text){ 196 var text=$("#"+search_text+"").val(); 197 var options={ 198 flowName:text 199 } 200 getList(obj_result,obj_page,type,page,pageSize,options); 201 }; 202 203 //时间戳返回成日期 204 function UnixToDate(unixTime, isFull, timeZone) { 205 if (typeof (timeZone) == 'number') 206 { 207 unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60; 208 } 209 var time = new Date(unixTime * 1000); 210 var ymdhis = ""; 211 ymdhis += time.getUTCFullYear() + "-"; 212 ymdhis += (time.getUTCMonth()+1) + "-"; 213 ymdhis += time.getUTCDate(); 214 if (isFull === true) 215 { 216 ymdhis += " " + time.getUTCHours() + ":"; 217 ymdhis += time.getUTCMinutes() + ":"; 218 ymdhis += time.getUTCSeconds(); 219 } 220 return ymdhis; 221 } 222 223 });
