1 <?php
  2 isset($_REQUEST['form_single_page_num']) && !empty($_REQUEST['form_single_page_num']) ? $single_page_num = $_REQUEST['form_single_page_num'] : $single_page_num = 50;
  3 isset($_REQUEST['form_go_page_num']) && !empty($_REQUEST['form_go_page_num']) ? $go_page_num = $_REQUEST['form_go_page_num'] : $go_page_num = 1;
  4 
  5 //setcookie('go_page_num',$go_page_num, time()+60);
  6 $data_sum = 9688;
  7 $db = gen_data($data_sum);
  8 $page_sum = ceil($data_sum / $single_page_num);
  9 $fetch_data = fetch_data($single_page_num, $go_page_num, $db);
 10 $fetch_data = fetch_data($single_page_num, $go_page_num, $db);
 11 
 12 function fetch_data($single_page_num, $go_page_num, $db)
 13 {
 14     global $page_sum;
 15     global $data_sum;
 16     $fetch_data = array();
 17     if ($go_page_num == $page_sum) {
 18         $end = $data_sum;
 19         $start = $single_page_num * ($go_page_num - 1);
 20     } else {
 21         $end = $single_page_num * $go_page_num;
 22         $start = $end - $single_page_num;
 23     }
 24 
 25     for ($w = $start; $w < $end; $w++) {
 26         array_push($fetch_data, $db[$w]);
 27     }
 28     return $fetch_data;
 29 }
 30 
 31 function gen_data($data_sum)
 32 {
 33     $gen = array();
 34     for ($w = 0; $w < $data_sum; $w++) {
 35         $tmp = $w + 1;
 36         $gen[$w]['rand'] = 'rand' . rand(123, 987);
 37         $gen[$w]['w'] = 'w' . $tmp;
 38     }
 39     return $gen;
 40 }
 41 
 42 ?>
 43 
 44 
 45 <!doctype html>
 46 <html>
 47 <head>
 48     <meta charset="UTF-8">
 49     <title>pagination-diy</title>
 50     <!--    <script src="jquery-3.1.0.min.js"></script>-->
 51 </head>
 52 <body>
 53 <div style="margin: 0 auto;text-align: center">
 54     <div id="page_area" class="pagination">
 55     </div>
 56 </div>
 57 <form method="post" id="javascript_page">
 58     <input type="hidden" name="form_single_page_num">
 59     <input type="hidden" name="form_go_page_num" id="form_go_page_num">
 60 </form>
 61 <? foreach ($fetch_data as $one) {
 62     echo $one['rand'] . '---' . $one['w'] . '<br>';
 63 } ?>
 64 
 65 </body>
 66 </html>
 67 
 68 <style type="text/css">
 69     .page {
 70         display: inline;
 71         padding: 0.3em;
 72         border: 0.1em solid deepskyblue;
 73         border-radius: 0.3em;
 74         margin: 0.31em;
 75     }
 76 </style>
 77 
 78 <script>
 79     var page_sum = <?=$page_sum?>, go_page_num =<?=$go_page_num?>;
 80     var id_page_area = document.getElementById('page_area');
 81     id_page_area.innerHTML = gen_pagelist();
 82     console.log(go_page_num);
 83     document.getElementById('<?='p'.$go_page_num?>').style.color = "red";
 84 
 85     function gen_pagelist() {
 86         var pagelist = '<div class="page">共<?= $page_sum ?>页</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
 87         var page_num_remain = page_sum - go_page_num;
 88         if (page_sum < 7) {
 89             switch (page_sum) {
 90                 case 0 :
 91                 case 1 :
 92                     break;
 93                 case 2 :
 94                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> ';
 95                     break;
 96                 case 3 :
 97                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> ';
 98                     break;
 99                 case 4 :
100                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> ';
101                     break;
102                 case 5 :
103                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> ';
104                     break;
105                 case 6 :
106                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> ';
107                     break;
108                 case 7 :
109                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> <div class="page" onclick="w()" id="p7">7</div> ';
110                     break;
111             }
112         } else {
113             pagelist += '<div class="page" onclick="w()" id="page_start">首页</div> ';
114             if (page_num_remain < 3) {
115                 var tmp = page_sum - 6;
116                 pagelist += '<div class="page" onclick="w()" id="p' + tmp + '">' + tmp + '</div> ' +
117                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
118                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
119                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
120                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
121                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
122                 '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ';
123             } else {
124                 if (go_page_num < 4) {
125                     pagelist += '<div class="page" onclick="w()" id="p1">1</div> <div class="page" onclick="w()" id="p2">2</div> <div class="page" onclick="w()" id="p3">3</div> <div class="page" onclick="w()" id="p4">4</div> <div class="page" onclick="w()" id="p5">5</div> <div class="page" onclick="w()" id="p6">6</div> <div class="page" onclick="w()" id="p7">7</div> ';
126 
127                 } else {
128                     var tmp = go_page_num - 3;
129                     pagelist += '<div class="page" onclick="w()" id="p' + tmp + '">' + tmp + '</div> ' +
130                     '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
131                     '<div class="page" onclick="w()" id="p' + (++tmp) + '">' + tmp + '</div> ' +
132                     '<div class="page" onclick="w()" id="p' + go_page_num + '">' + go_page_num + '</div> ' +
133                     '<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ' +
134                     '<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ' +
135                     '<div class="page" onclick="w()" id="p' + (++go_page_num) + '">' + go_page_num + '</div> ';
136                 }
137 
138             }
139             pagelist += '<div class="page" onclick="w()" id="page_end">尾页</div> ';
140 
141         }
142         return pagelist;
143     }
144 
145     function w() {
146         id_page_area.innerHTML = '';
147         var id = event.target.id;
148         switch (id) {
149             case 'page_start':
150                 go_page_num = 1;
151                 break;
152             case 'page_end':
153                 go_page_num = <?=$page_sum?>;
154                 break;
155             default :
156                 go_page_num = id.substr(1);
157                 break;
158         }
159         document.getElementById('form_go_page_num').value = go_page_num;
160         id_page_area.innerHTML = gen_pagelist();
161         document.getElementById('javascript_page').submit();
162     }
163 </script>