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> ' 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>