jquery分页

Posted 2021-01-24 xiuxiume

  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>