基于Jquery 分页，

工具：JS + Jquery + PHP + Sql

功能：PC端，总页数 >= 10 .分10个分页按钮，< 10 分5个分页按钮。没有添加首页尾页的跳转功能。有兴趣可以自己添加一下。

图片展示：

HTML：

 1     <style>
 2         * {list-style: none;margin: 0;padding: 0;}
 3         .button {padding: 10px 30px;background: #e2e2e2;border: none;}
 4         .bbol,.bbul {display: block;width: 80%;margin: 0 auto;}
 5         .bbol li {font-size: 20px;font-weight: bold;}
 6         .bbul li,.bbol li {display: inline-block;width: 20%;text-align: center;padding: 20px 10px;box-sizing: border-box;}
 7         .page {text-align: center;}
 8         .page ul {display: inline-block;}
 9         .page ul li {display: inline-block;width: 30px;height: 30px;line-height: 30px;margin: 10px 5px;background: #e2e2e2;cursor: pointer;user-select: none;}
10         .page ul li:hover {background: #80d3fb;color: white;}
11         .page ul li.prev,.page ul li.next {width: 70px;}
12         .page ul li.active {background: #80d3fb;color: white;}
13     </style>
14     <button class="button">search</button>
15     <div class="search_content">
16         <ol class="bbol"></ol>
17     </div>
18     <div class="page">
19         <ul></ul>
20     </div>

JS：

  1 init_search(5,"./page.php");
  2 // 每页显示条数、请求地址
  3 
  4 function init_search(display_data,ajax_link) {
  5     $(".button").click(function () {
  6         var ajaxbb = 0;
  7         var bbarr = ["Property_Name", "Profile_Type", "advocacy_cycle", "suburb", "id"];
  8         var pagebb = 0; //所有要展示的数据条数
  9         var pageallnum = 0; //分出的页数
 10         var num = display_data; //每页展示的数据条数
 11         var pageboo = false;
 12         var pagenum = 0; //当前页面位置
 13         var pageullifn_boo = false;
 14         var ajax_url = ajax_link;
 15         page_ajax({ 'name': "b" }, function (b) {
 16             ajaxbb = JSON.parse(b);
 17             pagefn(ajaxbb, bbarr, pagebb, pageallnum, num, pageboo, pagenum, pageullifn_boo,ajax_url);
 18         },ajax_url)
 19         pageprev = function (pageboo) {
 20             if (pageboo) {
 21                 $(".page ul").prepend('<li class = "prev">< prev</li>');
 22             }
 23         }
 24         mediafn();
 25     })
 26 }
 27 function pagefn(ajaxbb, bbarr, pagebb, pageallnum, num, pageboo, pagenum, pageullifn_boo,ajax_url) {
 28     $('.search_content ul').remove();
 29     $('.search_content ol li').remove();
 30     $('.page ul li').remove();
 31     
 32     page_ajax({ 'name': "a", "ajaxpage_begin": pagenum * num, "ajaxpage_all": num },function (b) {pagebb = JSON.parse(b);},ajax_url);
 33     pageallnum = Math.ceil(ajaxbb[0][0]/ num);
 34     console.log(ajaxbb[0][0] + "----取到的数据总条数"); //取到的数据总条数  
 35     console.log(pageallnum + "----pageallnum——————总页数");
 36     // 分页块数
 37     pageprev(pageboo);
 38 
 39     if (pageallnum == 0) {
 40         $(".page ul").append('<li num = "0">0</li>');
 41     }
 42     if (pageallnum >= 10) {
 43         init_page(1, 10, pageallnum);
 44     } else {
 45         init_page(1, 5, pageallnum);
 46     }
 47     if (pageallnum > 1) {
 48         $(".page ul").append('<li class = "next">next ></li>');
 49     }
 50     $('.page ul li').eq(0).addClass("active");
 51     $(".page ul").off();
 52     //左右点击
 53     // prev
 54     $(".page ul").on("click", ".prev", function () {
 55         pagenum--;
 56         prev_if(pagenum,pageboo,pageallnum,num,pagebb,pageullifn_boo,bbarr,ajax_url);
 57         page_ajax({ 'name': "a", "ajaxpage_begin": pagenum * num, "ajaxpage_all": num },function (b) {pagebb = JSON.parse(b);},ajax_url);
 58         $(".search_content ul").remove();
 59         pagebbfn(pagebb, bbarr);
 60         mediafn();
 61     })
 62 
 63     // next
 64     $(".page ul").on("click", ".next", function () {
 65         pagenum++;
 66         next_if(pagenum,pageboo,pageallnum,pageullifn_boo);
 67         page_ajax({ 'name': "a", "ajaxpage_begin": pagenum * num, "ajaxpage_all": num },function (b) {pagebb = JSON.parse(b);},ajax_url);
 68         $(".search_content ul").remove();
 69         pagebbfn(pagebb, bbarr);
 70         mediafn();
 71     })
 72 
 73     // 展示数据
 74     for (const olbbarr in bbarr) {
 75         $(".search_content ol").append('<li>' + bbarr[olbbarr] + '</li>');
 76     }
 77     pagebbfn(pagebb, bbarr);
 78     // 分页按钮点击
 79     $(".page ul").on("click", ".page_li", function () {
 80         if($(this).text()-1 >= pagenum){
 81             pagenum = $(this).text()-1;
 82             if(pagenum != 0){
 83                 next_if(pagenum,pageboo,pageallnum,pageullifn_boo);
 84             }
 85         }else{
 86             if($(".page ul li:last").attr('class') != "next"){
 87                 $(".page ul").append('<li class = "next">next ></li>');
 88             }
 89             pagenum = $(this).text()-1;
 90             prev_if(pagenum,pageboo,pageallnum,num,pagebb,pageullifn_boo,bbarr,ajax_url);
 91         }
 92         console.log($(this).text()-1);
 93         page_ajax({ 'name': "a", "ajaxpage_begin": pagenum * num, "ajaxpage_all": num },function (b) {pagebb = JSON.parse(b);},ajax_url);
 94         $(".search_content ul").remove();
 95         pagebbfn(pagebb, bbarr);
 96         mediafn();
 97     })
 98 }
 99 
100 // 分页按钮
101 function init_page(page_begin, page_all, pageallnum) {
102     for (let i = page_begin, page_length = 1; i <= pageallnum; i++, page_length++) {
103         if (page_length <= page_all) {
104             $(".page ul").append('<li class="page_li">' + i + '</li>');
105         }
106     }
107 }
108 
109 // 数据展示
110 function pagebbfn(pagebb, bbarr) {
111     for (const bbk in pagebb) {
112         $(".search_content").append('<ul class = "bbul"></ul>')
113         for (const bbarrk in bbarr) {
114             $(".search_content ul:nth-last-child(1)").append('<li>' + pagebb[bbk][bbarr[bbarrk]] + '</li>');
115         }
116     }
117 }
118 
119 // 左点击按钮
120 function pageprev(pageboo) {
121     if (pageboo) {
122         $(".page ul").prepend('<li class = "prev">< prev</li>');
123     }
124 }
125 
126 // Ajax 请求
127 function page_ajax(obj, fn ,ajax_url) {
128     $.ajax({
129         // 同步请求数据 false ,在此等情况下 ajax 没有执行完毕的情况下其他js 不会继续执行
130         async: false, 
131         type: "post",
132         url: ajax_url,
133         data: obj,
134         success: fn
135     });
136 }
137 
138 // 大于10页展示方式
139 function page_more(pagenum, pageallnum, pageullifn_boo) {
140     if (pagenum >= 5) {
141         $(".page ul").html("");
142         $(".page ul").prepend('<li class = "prev">< prev</li>');
143         if ((pageallnum - pagenum) <= 5) {
144             init_page(pageallnum - 9, 10, pageallnum);
145             pageullifn_boo = true;
146         } else {
147             pageullifn_boo = false;
148             init_page(pagenum - 4, 10, pageallnum);
149         }
150         if (pageullifn_boo) {
151             $(".page ul").append('<li class = "next">next ></li>');
152             if (pageallnum >= 10) {
153                 $('.page ul li').eq(pagenum - (pageallnum - 11)).addClass("active").siblings().removeClass('active');
154             } else {
155                 $('.page ul li').eq(pagenum - 1).addClass("active").siblings().removeClass('active');
156             }
157         } else {
158             $(".page ul").append('<li class = "next">next ></li>');
159             $('.page ul li').eq(6).addClass("active").siblings().removeClass('active');
160         }
161     } else {
162         $('.page ul li').remove();
163         $(".page ul").prepend('<li class = "prev">< prev</li>');
164         init_page(1, 10, pageallnum);
165         $(".page ul").append('<li class = "next">next ></li>');
166         $('.page ul li').eq(pagenum + 1).addClass("active").siblings().removeClass('active');
167     }
168 }
169 
170 // 小于10页展示方式
171 function page_little(pagenum, pageallnum, pageullifn_boo, page_fn1, page_fn2) {
172     $(".page ul").html("");
173     $(".page ul").prepend('<li class = "prev">< prev</li>');
174     if (page_fn1) {
175         if ((pageallnum - pagenum) <= 3) {
176             if (pageallnum < 5) {
177                 init_page(1, 5, pageallnum);
178             } else {
179                 init_page(pageallnum - 4, 5, pageallnum);
180             }
181             pageullifn_boo = true;
182         } else {
183             pageullifn_boo = false;
184             init_page(pagenum - 1, 5, pageallnum);
185         }
186         if (pageullifn_boo) {
187             $(".page ul").append('<li class = "next">next ></li>');
188             if (pageallnum > 10) {
189                 $('.page ul li').eq(pagenum - (pageallnum - 11)).addClass("active").siblings().removeClass('active');
190             } else {
191                 if (pageallnum < 5) {
192                     $('.page ul li').eq(page_fn2).addClass("active").siblings().removeClass('active');
193                 } else {
194                     $('.page ul li').eq(pagenum - (pageallnum - 6)).addClass("active").siblings().removeClass('active');
195                 }
196             }
197         } else {
198             $(".page ul").append('<li class = "next">next ></li>');
199             $('.page ul li').eq(3).addClass("active").siblings().removeClass('active');
200         }
201     } else {
202         if(pagenum > 2 ){
203             init_page(pagenum, 5, pageallnum);
204         }else{
205             init_page(1, 5, pageallnum);
206         }
207         $('.page ul li').eq(pagenum + 1).addClass("active").siblings().removeClass('active');
208         $(".page ul").append('<li class = "next">next ></li>');
209     }
210 }
211 
212 function prev_if(pagenum,pageboo,pageallnum,num,pagebb,pageullifn_boo,bbarr,ajax_url){
213     if (pagenum <= 0) { 
214         pageboo = false;
215         $('.prev').remove();
216         if ((pagenum <= 0 && pageallnum == 2) || pagenum <= 0) {
217             if($(".page ul li:last").attr('class') != "next"){
218                 $(".page ul").append('<li class = "next">next ></li>');
219             }
220         }
221         pageprev = function (pageboo) {
222             if (pageboo) {
223                 $(".page ul").prepend('<li class = "prev">< prev</li>');
224             }
225         }
226         $('.page ul li').eq(pagenum).addClass("active").siblings().removeClass(
227             'active');
228         
229         page_ajax({ 'name': "a", "ajaxpage_begin": pagenum * num, "ajaxpage_all": num },function (b) {pagebb = JSON.parse(b);},ajax_url);
230         $(".search_content ul").remove();
231         pagebbfn(pagebb, bbarr);
232         return false;
233     }
234     if (pageallnum >= 10) {
235         page_more(pagenum, pageallnum, pageullifn_boo)
236     } else {
237         page_little(pagenum, pageallnum, pageullifn_boo, pagenum >= 2 || pageallnum < 5, pagenum - (pageallnum - (pageallnum + 1)));
238     }
239 }
240 
241 function next_if(pagenum,pageboo,pageallnum,pageullifn_boo){
242     if (pagenum > 0) {
243         pageboo = true;
244         pageprev(pageboo);
245         pageprev = function () { }
246         if (pagenum >= pageallnum) {
247             pagenum = pageallnum - 1;
248         }
249     }
250     if (pageallnum >= 10) {
251         page_more(pagenum, pageallnum, pageullifn_boo)
252     } else {
253         page_little(pagenum, pageallnum, pageullifn_boo,pagenum >= 3,pagenum - (pageallnum - 5));
254     }
255     if ((pagenum + 1) == pageallnum) {
256         $('.next').remove();
257     }
258 }
259 
260 function mediafn(){
261     if(window.innerWidth < 992){
262         $('.page ul li').each(function(){
263             if($(this).attr("class").indexOf("active") > 0 || $(this).attr("class").indexOf("prev") >= 0 || $(this).attr("class").indexOf("next") >= 0){
264             }else{
265                 $(this).remove();
266             }
267         })
268     }
269 }

PHP：

 1 <?PHP
 2 $pdo = new pdo('mysql:host=localhost;dbname=testone','root','123456');
 3 switch ($_POST['name']) {
 4     case 'a':
 5         $page = $pdo->query("select * from member where Chargeable_Rooms is not NULL LIMIT ".$_POST['ajaxpage_begin'].",".$_POST['ajaxpage_all']."")->fetchAll(PDO::FETCH_ASSOC);
 6         echo (json_encode($page));
 7         break;
 8     case 'b':
 9         $pagecount = $pdo->query("select count(*) from member where Chargeable_Rooms is not NULL")->fetchAll(PDO::FETCH_ASSOC);
10         $pagenum = array();
11         foreach ($pagecount[0] as $key => $value) {
12             $pagenum[0] = $value;
13         }
14         echo (json_encode([$pagenum]));
15         break;
16     default:
17         # code...
18         break;
19 }

有什么改进的意见的话请联系本人QQ；

QQ号：1667010737；同邮箱

posted @ 2020-07-19 16:20 false- 阅读(172) 评论(0) 收藏举报

刷新页面返回顶部

false-

基于Jquery 分页，

公告