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

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

	

		
编号
		
名字
		
电话号码
		
城市
		
种类
		
日期
	


	
	
	

		
第一页
		
上一页
		
下一页
		
尾页
		
 
		
跳转
	

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

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

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