jquery分頁
阿新 • • 發佈：2018-12-05
parse .ajax style 刪除 cati ati 3.2 tor 多少
1 <script src="../../js/jquery-3.2.1.min.js"></script> 2 <script src="../../js/jquery.pagination.js"></script> 3 4 <script> 5 $(function () { 6 getPage(); 7 }); 8 // 分頁 9 function getPage() { 10 var user = JSON.parse(sessionStorage.getItem(‘user‘));11 var token = user.token; 12 $.ajax({ 13 url: PROJECTLIST, 14 type: ‘get‘, 15 data: { 16 page: 0, 17 pageSize: 100 18 }, 19 dataType: ‘json‘, 20 beforeSend: function (request) { 21 request.setRequestHeader("token", token);22 }, 23 success: function (data) { 24 if (data.code==401){ 25 alert("請重新登錄"); 26 top.location.href="../login/login.html"; 27 return false; 28 } 29 30 let pn = 1; //當前頁數 31 let count = data.data.totalElements; //總條數 32 let size = 5; //每頁顯示的個數 33 let total = Math.ceil(count/size); //總共多少頁 34 // 根據總頁數添加li 索引 35 for (var i =0;i<total;i++){ 36 $(‘.table_mess tbody‘).append("<tr>"+(i+1)+"</tr>") 37 } 38 gotoPage(pn); 39 40 // 點擊數字 41 $(".paginatin-wrapper").click(function(event) { 42 pn=$(".M-box1 .active").text(); 43 gotoPage(pn); 44 }); 45 } 46 }); 47 } 48 // 根據頁數展示數據 49 function gotoPage(pn) { 50 getData(pn); 51 } 52 // 獲取數據列表 53 function getData(pn) { 54 var user = JSON.parse(sessionStorage.getItem(‘user‘)); 55 var token = user.token; 56 var item; 57 $.ajax({ 58 url: PROJECTLIST, 59 type: ‘get‘, 60 data: { 61 page: 0, 62 pageSize: 100 63 }, 64 dataType: ‘json‘, 65 beforeSend: function(request) { 66 request.setRequestHeader("token", token); 67 }, 68 success: function (data) { 69 if (data.code == 200){ 70 var count = data.data.totalElements;// 總條數 71 var size = 5; // 每頁顯示條數 72 var total =Math.ceil( count / size ); //總頁數 73 var yu = count%size; // 得到總數除每頁顯示個數的余數 74 var linum = size; 75 var startPage = size*(pn-1); 76 var endPage = startPage+size-1; 77 78 var $tbody = $(".table_mess tbody"); 79 $tbody.empty(); 80 if (pn==total) { //如果是最後一頁就添加余下個數的li 81 linum=yu; 82 } 83 for (var i = 0; i < linum; i++) { 84 $tbody.append(‘<tr class="li-tag"></tr>‘); 85 } 86 var items = data.data.data; 87 if (items.length>0){ 88 if (total==1){ 89 for (var i=0;i<count;i++){ 90 var pic = items[i].picture.split(","); 91 var nav = ` 92 <td>${items[i].name}</td> 93 <td> 94 <span> 95 <i class="mess_lab">所屬小區:</i> 96 <i class="name">${items[i].ssxq}</i> 97 </span> 98 <span>.........</span> 99 </td> 100 <td> 101 <span> 102 <i class="mess_lab">總面積:</i> 103 <i class="name">${items[i].zmj}</i> 104 </span> 105 <span>.........</span> 106 </td> 107 <td><img src="${pic[0]}" ></td> 108 <td> 109 <a onclick="lookmore(${i})" href="javascript: void(0)">查看詳情</a> 110 <a href="#">刪除</a> 111 </td> 112 ` 113 114 $(".li-tag").eq(i).append(nav); 115 } 116 } else { 117 for (var j = startPage,k=0;j<endPage,k<size;j++,k++){ 118 if (j==count){break;} 119 var pic = items[j].picture.split(","); 120 var nav = ` 121 <td>${items[j].name}</td> 122 <td> 123 <span> 124 <i class="mess_lab">所屬小區:</i> 125 <i class="name">${items[j].ssxq}</i> 126 </span> 127 128 129 <span>.........</span> 130 </td> 131 <td> 132 <span> 133 <i class="mess_lab">總面積:</i> 134 <i class="name">${items[j].zmj}</i> 135 </span> 136 <span>.........</span> 137 </td> 138 <td><img src="${pic[0]}" ></td> 139 <td> 140 <a onclick="lookmore(${j})" href="javascript: void(0)">查看詳情</a> 141 <a href="#">刪除</a> 142 </td> 143 ` 144 $(".li-tag").eq(k).append(nav); 145 } 146 } 147 $(‘.M-box1‘).pagination({ 148 pageIndex: 2, 149 totalData: count, 150 showData: 5, 151 current: pn, 152 coping: true 153 }); 154 }else { 155 $(‘.table_mess tbody‘).html("暫無數據") 156 } 157 }else if (data.code==401){ 158 alert("請重新登錄"); 159 top.location.href="../login/login.html"; 160 return false; 161 } 162 } 163 }); 164 } 165 </script>
jquery分頁