jquery分页

 ?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: true153 ????????????????????});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>