在網頁中看到的分頁效果，想一下就點擊分頁中的內容的時候，然后調用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 });