ThinkPHP5之Ajax分页

Ajax分页在项目开发中是一项必备的技能。当我们的数据库数据量比较大的时候使用Ajax分页可以很好的缓解数据库的查询压力。那么Ajax分页如何实现呢？原生SQL分页我们知道需要有偏移量，每页显示的数据条数就可以简单实现。其实Ajax分页原理也一样，当我们在前台点击页码时传递页码在后台，后台进行数据处理即可。本例tp3.2与tp5都适用，话不多说，直接贴代码

前端Ajax：

<div class="dataTables_paginate paging_bootstrap pagination"><!-- 输出分页 -->{volist name="paging" id="value"}<li><a href="javascript:void(0)" οnclick="page({$value})">{if condition="$value eq '0'"}首页{else/}{$value}{/if}</a></li>{/volist}
</div>

Ajax部分

<script>
//分页的Ajax
function page(page){$.get("{:url('Role/index')}",{page:page},function(data){$("#uid").html(data);});
}
</script>

后台进行Ajax的数据分页

public function index(){$count = Db::query("select count(id) as count from tb_role where is_delete =0");$tot = $count[0]['count']; //统计数据总条数// dump($tot);exit;$limit = 5; //每页显示多少条 $total = intval(ceil($tot/$limit)); //进一取整 计算多少页$paging = array();for ($i=0; $i <=$total; $i++) { $paging[$i] = $i;}                              //页码$page = isset($_GET['page'])?$_GET['page']:"";if(empty($page)){$page = 1;} //前台传递过来的页码 $offset = ($page-1)*$limit; //偏移量$res = Db::query("select id,name,descr,status,is_delete from  tb_role limit $offset,$limit"); //SQL// dump($res);exit;if(request()->isAjax()){  //如果是AJAX请求的分页$this->assign('res',$res);$this->assign('title','权限管理');return $this->fetch('Role/indexAjax');exit;}//非Ajax请求$this->assign('paging',$paging);$this->assign('res',$res);$this->assign('title','权限管理');return view();}

当然这里我们看到如果是Ajax分页的话后台渲染的模板不一样，其实这里是做的一个判断。当然，大神写的应该比我好。这种方式比较复杂，为了让大家看的明白我将indexAjax.html也贴出来。

<div id="uid">
<table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info"><thead><tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="First Name" style="width: 90px;">编号</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending" style="width: 186px;">类别</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 119px;">描述</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Edit: activate to sort column ascending" style="width: 84px;">级别</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Delete: activate to sort column ascending" style="width: 124px;text-align:center;">操作</th></tr></thead><tbody role="alert" aria-live="polite" aria-relevant="all">{foreach name="res" item="res"}<tr class="odd"><td class=" ">{$res['id']}</td><td class=" ">{$res['name']}</td><td class=" ">{$res['descr']}</td><td class="center ">{if condition="$res.status eq 4"}超级管理员{else /} 管理员{/if}</td><td class=" ">{if condition="$res.status eq 4"}ROOT{else/} <a href="{:url('Role/edit',['id'=>$res['id']])}" class="btn btn-info btn-xs" {if condition="$res.is_delete eq '1'"/}disabled{/if}>修改</a>{/if}{if condition="$res.status eq 4"}ROOT{else/}<input type="button" οnclick="del({$res.id})" class="btn btn-danger btn-xs" id="delete" {if condition="$res.is_delete eq '1'"/}disabled{/if} value="停用">|{/if}<a href="{:url('Role/nodelist',['id'=>$res['id']])}" class="btn btn-success btn-xs">分配节点</a></td></tr>{/foreach}</tbody>
</table>
</div>

这里呢，其实就是将index.html中的数据分配部分复制了一份。为什么要这样做呢，因为每次Ajax请求一次，后端返回给我们前端的页码都不一样，对应的数据也就不一样。所以做了这样一步操作。当然，如果是首次访问没有Ajax请求，默认显示的还是index.html。

ThinkPHP5之Ajax分页相关推荐

Thinkphp5之ajax分页实现_paginate()参数详细
Thinkphp5 做数据搜索需要带关键词分页,如何将查询条件带入到分页中,本文详细介绍Thinkphp5 分页带参数一.基本使用方法: $list = Db::name('user')->w ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
thinkphp5 ajax分页
最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5的分页功能介绍参数描述 list_rows 每页数量 page 当前页 path url路径 ...
tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效
Thinkphp 5.1采用Ajax分页后,首页自然不是问题,但是后续的页面链接仍然指向原地址:虽然可以取回数据,但是没有样式的渲染--因为此时的页面只有"一部分"本身就没有CSS ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
PHP、jQuery、jQueryPager结合实现Ajax分页
建立html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
ajax分页实现（php）
ajax分页实现(php) 使用jquery.pagination.js插件引入js文件.css文件 <link rel="stylesheet" href="/ ...
Thinkphp ajax分页
Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...
php ajax 分页phpapi,ajax分页_php ajax分页代码
摘要腾兴网为您分享:php ajax分页代码,智慧农业,长沙银行,一折包邮,信和财富等软件知识,以及381.65,红娘牵线,中经油马,战地小,歌词制作,唯美会,微软必应输入法,邓州在线,螺丝钉,侠客 ...

ThinkPHP5之Ajax分页

ThinkPHP5之Ajax分页相关推荐

最新文章

热门文章