基于php的pc端分页
2017-12-28 10:28
141 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.page_active{
background-color: #f86000!important;
color: #fff!important;
}
</style>
</head>
<body>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a name="1">首页</a></li>
</ul>
<ul class="pagination page-content">
</ul>
<ul class="pagination page-footer">
</ul>
<ul class="pagination page-number">
<li>
<input class="page-enter" style=" border: 1px solid #ddd;;width: 30%;float: left;float: left;padding: 6px 12px;" type="text" value="11">
</li>
</ul>
</nav>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$('.pagination').delegate('a','click',function () {
var number=this.name;
ajaxFun(1,number);
});
$(".page-number .page-enter").keypress(function(e){
var eCode = e.keyCode;
if (eCode == 13){
// console.log(e.target);
var number=$(e.target).val();
console.log(number);
ajaxFun(1,number);
//自己写判断函数
}
});
function ajaxFun(flag,number){
$.ajax({
//
// headers: {
// Accept: "application/json; charset=utf-8"
// },
url:"../page/php/page.php",
data:{page:number},
type: "POST",
success: function (data) {
var html='';
var tableJson=JSON.parse(data);
var totalNumber = Number(tableJson.total);
if(number>totalNumber){
alert('已经超过最大页码，最大页码为'+totalNumber);
return;
}else{
pageFun(flag,tableJson);
}
}
});
}
//初始的页码
function initFun(){
ajaxFun(0,1);
}
initFun();
function pageFun(flag,tableJson) {
var pageNumber = Number(tableJson.current);
var totalNumber = Number(tableJson.total);
if(pageNumber ==2 ){
if(totalNumber>5){
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li><a name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
' <li><a name="'+(pageNumber+3)+'">'+(pageNumber+3)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}else{
var htmls="";
for(var i=1;i<totalNumber-pageNumber+1;i++){
htmls= htmls +' <li><a name="'+(pageNumber+i)+'">'+(pageNumber+i)+'</a></li>\n';
}
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
htmls+
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}
}else if(totalNumber - pageNumber ==2){
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li><a name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}else if(pageNumber ==1){
if(flag==0){
var html='';
html='<li><a name="'+totalNumber+'">尾页</a></li>';
$('.page-footer').html(html);
}
if(totalNumber>5){
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li><a name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
' <li><a name="'+(pageNumber+3)+'">'+(pageNumber+3)+'</a></li>\n' +
' <li><a name="'+(pageNumber+4)+'">'+(pageNumber+4)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}else{
var htmls="";
for(var i=1;i<totalNumber-pageNumber+1;i++){
htmls= htmls +' <li><a name="'+(pageNumber+i)+'">'+(pageNumber+i)+'</a></li>\n';
}
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
htmls+
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}
}else if(totalNumber - pageNumber ==1){
if(totalNumber>5){
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-3)+'">'+(pageNumber-3)+'</a></li>\n' +
' <li><a name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}else{
var htmls="";
console.log('zzzz');
for(var i=totalNumber-2;i>0;i--){
htmls= htmls +' <li><a name="'+(pageNumber-i)+'">'+(pageNumber-i)+'</a></li>\n';
}
console.log(htmls);
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
htmls+
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}
}else if(totalNumber - pageNumber == 0){
if(totalNumber>5){
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-4)+'">'+(pageNumber-4)+'</a></li>\n' +
' <li><a name="'+(pageNumber-2)+'">'+(pageNumber-3)+'</a></li>\n' +
' <li><a name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}else{
var htmls="";
for(var i=totalNumber-1;i>0;i--){
htmls= htmls +' <li><a name="'+(pageNumber-i)+'">'+(pageNumber-i)+'</a></li>\n';
}
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
htmls+
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}
}else{
html=' <li>\n' +
' <a aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>\n' +
' <li><a name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
' <li><a name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
' <li><a class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
' <li><a name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
' <li><a name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
' <li>\n' +
' <a aria-label="Next" name="'+(pageNumber+1)+'">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>';
}
console.log(html);
$('.page-content').html('');
$('.page-content').html(html);
}
</script>
</body>
</html><?php
/**
* Created by PhpStorm.
* User: 74406
* Date: 2017/12/27
* Time: 19:41
*/
//header("Content-Type:application/json;charset=utf-8");
$current=$_POST['page'];
//echo $current;
$page=$current;
$pageLength=3;
$con = new mysqli('127.0.0.1', 'root', '', 'test');
if($con){
$result=mysqli_query($con,"SELECT * FROM teacher");
$footLength=3;
$count=mysqli_num_rows($result);
$pageNum=ceil ($count/$footLength);
$begin=($page-1)*3;
$sql="SELECT * FROM teacher limit $begin,$pageLength";
$result=mysqli_query($con,$sql);
$result=mysqli_fetch_all($result,MYSQLI_ASSOC);
// var_dump($result);
$array=[];
$array['total']=$pageNum;
$array['current']=$current;
$array['data']=$result;
echo json_encode($array);
// 释放结果集
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于bootstrap+php+mysql的分页实现
- 基于PHP多维数组的分页实现(可用于在线购物车等应用)
- PHP基于数组的分页函数(核心函数array_slice())
- php基于SQLite实现的分页功能示例
- php基于数组的分页实现
- PHP基于数组的分页函数(核心函数array_slice())
- PHP基于数组的分页函数(核心函数array_slice())
- 一个可分页的基于文本的PHP留言板源码第1/2页
- 基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)
- 基于PHP实现数据分页显示功能
- 基于PHP实现数据分页显示功能
- PHP基于数组的分页函数(核心函数array_slice())
- PHP基于数组实现的分页函数实例
- 基于php+mysql实现分页技术
- 一个可分页的基于文本的PHP留言板
- 一个可分页的基于文本的PHP留言板源码第1/2页
- PHP基于数组实现的分页函数实例
- PHP基于数组的分页函数(核心函数array_slice())
- PHP基于数组的分页函数(核心函数array_slice())
- PHP基于数组的分页函数(核心函数array_slice())