分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

tp5+jquery通过模板页面替换的方式实现分页

发布时间:2023-09-06 02:01责任编辑:苏小强关键词:暂无标签

 php页面的方法

//jquery分页 ???public function jqpage(){ ???????//接收当前页 ???????$p = Request::instance()->param(‘page‘); ???????$page = empty($p)?1:$p; ???????//求出总条数 ???????$count = Db::table(‘user‘)->count(); ???????//设置每页显示条数 ???????$length = 3; ???????//求出总页数 ???????$num_page = ceil($count/$length); ???????//设置偏移量 ???????$limit = ($page-1)*$length; ???????//查询 ???????$data = Db::table(‘user‘)->limit($limit,$length)->select(); ???????//判断当前页拼接数组 ???????$arr[‘data‘] = $data; ???????$arr[‘home_page‘] = 1; ?//首页 ???????$arr[‘prev_page‘] = $page-1<=1 ? 1 : $page-1; ?//上一页 ???????$arr[‘next_page‘] = $page+1>=$num_page ? $num_page : $page+1; ?//下一页 ???????$arr[‘last_page‘] = $num_page; ???????return view(‘jqpage‘,[‘list‘=>$arr],[‘__CSS__‘=>‘/static‘,‘__JS__‘=>‘/static‘]); ???}

html页面

<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" ?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<link rel="stylesheet" href="__CSS__/css/bootstrap.css"> ???<title>JQ分页</title></head><body><table class="table table-bordered"> ???<tr> ???????<th>ID</th> ???????<th>用户名</th> ???????<th>密码</th> ???????<th>地址</th> ???????<th>手机</th> ???????<th>操作</th> ???</tr> ???{volist name="list.data" id="vo"} ???<tr> ???????<td>{$vo.id}</td> ???????<td>{$vo.uname}</td> ???????<td>{$vo.pwd}</td> ???????<td>{$vo.area}</td> ???????<td>{$vo.phone}</td> ???????<td> ???????????<a href="{:url(‘Login/deldata‘)}?id={$vo.id}">删除</a> ???????????<a href="{:url(‘Login/updpage‘)}?id={$vo.id}">修改</a> ???????</td> ???</tr> ???{/volist}</table><input type="hidden" name="p" id="p" value="1"><a href="javascript:void(0);" onclick="page({$list.home_page})">首页</a><a href="javascript:void(0);" onclick="page({$list.prev_page})">上一页</a><a href="javascript:void(0);" onclick="page({$list.next_page})">下一页</a><a href="javascript:void(0);" onclick="page({$list.last_page})">尾页</a><script src="__JS__/js/jquery.js"></script><script> ???function page(obj) { ???????$.get("{:url(‘Login/jqpage‘)}?page="+obj, ???????????function(data,status){ ???????????????// console.log("数据: \n" + data + "\n状态: " + status); ???????????????$("body").html(data); ???????????}); ???}</script></body></html>

tp5+jquery通过模板页面替换的方式实现分页

原文地址:https://www.cnblogs.com/hopelooking/p/9222122.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved