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]}" alt=""></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]}" alt=""></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>