jq.ajax+php+mysql实现分页显示数据

最新推荐文章于 2021-02-19 07:44:18 发布

戏里戏外。

最新推荐文章于 2021-02-19 07:44:18 发布

阅读量2.7k

点赞数 3

分类专栏： ajax+php+mysql 文章标签： mysql ajax php 分页数据

本文链接：https://blog.csdn.net/hjw453321854/article/details/78866835

版权

ajax+php+mysql 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

test.html代码【这里是数据展示页面的代码】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<style>
*{margin:0;padding:0;}
.msg{width:800px;margin:50px auto;}
table{width:800px;height:200px;border-collapse:collapse;text-align:center;}
table tr td{width:70px;border:1px solid #999;}
ul{width:550px;height:20px;margin-top:20px;float:right;}
ul li{width:50px;height:20px;line-height:20px;text-align:center;float:left;list-style:none;font-size:14px;border:1px solid #999;margin-left:5px;cursor:pointer;}
ul .jump{width:50px;height:20px;border:0;}
.text{width:250px;height:20px;line-height:20px;text-align:left;font-size:14px;float:left;margin-top:20px;}
</style>

<body>
<div class="msg">
<table>
	<tr>
		<td>编号</td>
		<td>名字</td>
		<td>电话号码</td>
		<td>城市</td>
		<td>种类</td>
		<td>日期</td>
	</tr>
</table>
<div class="btn-fy">
	<div class="text"></div>	
	<ul class="page">
		<li class="firstPage">第一页</li>
		<li class="prePage">上一页</li>
		<li class="nextPage">下一页</li>
		<li class="lastPage">尾页</li>
		<li><select class="jump"></select></li> 
		<li class="jumpPage">跳转</li>
	</ul>
</div>
</msg>


</body>
</html>

js代码【这里是生成数据和分页的代码】

<script>
var page=1;
window.οnlοad=function(){
	getData(page)

function getData(page,totalPage){
	$.ajax({
		type: 'POST',
		url: 'page.php',
		data: {'page':page},
		dataType:'json',
		success:function(data){
		//通过json传递过来
		var totalPage =data[0].totalPage;//分页条数
		var count=data[0].count;//数据总条数据
			var pagesize=6;
			var num=data.length;
			var str="";
			for(var i=0;i<num;i++){
				str+="<tr><td>" + data[i].id +"</td><td>" + data[i].name +"</td><td>" + data[i].mobile + "</td><td>" + data[i].city +"</td><td>" + data[i].type +"</td><td>" + data[i].date + "</td></tr>";

			}
			var text = "共"+count+"条记录 分"+totalPage+"页 当前第"+page+"页";
			$(".msg table").html(str);
			$(".msg .text").html(text);
			var option=""; 
			for(var i=1;i<=totalPage;i++){  
        			option+='<option value='+i+'>'+i+'</option>'  
   			 }  
   			 $(".jump").html(option);
			if(page<1){
				page=1
			};
			if(page>totalPage+1){
				page=totalPage;
			}
		},
		
		error:function(){
            		console.log("数据加载失败");
       	 }


})

return page;
}

$(".page .nextPage").click(function(){ 
        	page++;
	if(page>4){
		page=4;
		getData(page)
	}else{
		getData(page)
	}
        	
        })

	
$(".page .firstPage").click(function(){  
            getData(1);  
        }) 
        $(".prePage").click(function(){
        	page --;
	if(page<1){
		page=1;
		getData(page)
	}else{
		getData(page)
	}
	
        	
        })    	
    	$(".lastPage").on("click",function(){  
            getData(4); 
        })

	$(".jumpPage").click(function(){
		var s=parseInt($(".jump").val());
		if(s!=page){  
        			getData(s); 
			
    		} 
	})

} 

</script>

php代码【连接数据库获取信息返回json数据给前台】

<?php  
$conn=new Mysqli(host,username,password,dbname);  
if(!$conn){  
    echo "数据库连接错误!";exit;  
}  
$page=$_POST['page']; //获取前台传过来的页码  
$pageSize=6;  //设置每页显示的条数  
$start=($page-1)*6; //从第几条开始取记录  
mysqli_query($conn,"set names 'utf8'");  
$result=$conn->query("select * from Messages limit {$start},{$pageSize}");  

$count=$conn->query("select id from Messages")->num_rows;//记录总条数
$totalPage=ceil($count/$pageSize);//页码数


while($row=mysqli_fetch_array($result)){  
    $datas[] = array("id"=>$row['id'],"name"=>$row['name'],"mobile"=>$row['mobile'],"city"=>$row['city'],"type"=>$row['type'],"date"=>$row['date'],"count"=>$count,"totalPage"=>$totalPage);
}  

echo json_encode($datas);
mysqli_close($conn);
?>

数据库表数据

-- 建表语句 Messages

CREATE TABLE `Messages` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `mobile` varchar(11) DEFAULT NULL,
  `city` varchar(32) DEFAULT NULL,
  `type` varchar(32) DEFAULT NULL,
  `date` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=23 DEFAULT CHARSET=gbk


-- 表中的数据 


insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('22','上的','16935861486','深圳','联通','2017-8-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('21','大姐','15939549869','广州','移动','2017-6-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('20','李玉','15938648624','上海','电信','2017-6-4');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('19','人人','19924862866','北京','移动','2017-5-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('18','大户','15938968969','深圳','电信','2017-8-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('17','返回','15935865966','广州','移动','2017-9-6');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('16','偶尔','15938954959','北京','联通','2017-6-8');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('15','点后','15935851625','深圳','电信','2017-9-5');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('14','名单','15938948669','广州','移动','2017-7-8');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('13','区域','15935862495','上海','移动','2017-2-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('12','黄五','15939628964','北京','电信','2017-9-3');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('11','周达','13968954861','上海','电信','2017-5-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('10','周都','15932486269','上海','联通','2017-10-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('9','李到','15935895485','北京','移动','2017-9-8');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('8','张也','17593896325','深圳','移动','2017-10-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('7','周姐','17593289636','北京','联通','2017-4-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('6','张宇','15935896426','北京','联通','2017-9-6');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('5','黄已','15963896256','广州','移动','2017-12-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('4','某某','15932865956','上海','联通','2017-5-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('3','王五','17593586296','广州','联通','2017-6-9');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('2','李四','19263586745','北京','移动','2017-5-8');
insert into `Messages`(`id`,`name`,`mobile`,`city`,`type`,`date`)
values('1','张三','13031269256','上海','移动','2017-6-8');

完成后的界面

完整代码下载：https://github.com/jwhuang59/demo/tree/master/msg

戏里戏外。

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
jq.ajax+php+mysql实现分页显示数据

test.html代码【这里是数据展示页面的代码】*{margin:0;padding:0;}.msg{width:800px;margin:50px auto;}table{width:800px;height:200px;border-collapse:collapse;text-align:center;}table tr td{width:70px;borde
复制链接

扫一扫