?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
publicfunction index()
{
$where = array ();
$name = i( 'name' );
if (! empty ( $name )){
$where [ 'name' ]= array ( 'like' , '%' .(string) $name . '%' );
}
$role =m( 'role' );
$count = $role ->where( $where )-> count (); // 查询满足要求的总记录数
$page = new hinkjaxpage( $count , 'ajax-page' ,10); // 实例化分页类 传入总记录数、ajax更新的局部页面id和每页显示的记录数(10)
$page ->lastsuffix=false;
$page ->setconfig( 'first' , '首页' );
$page ->setconfig( 'last' , '末页' );
$page ->setconfig( 'header' , '<span class="rows btn btn-default margin-l-2">共 %total_row% 条</span>' ); //分页条数
$page ->setconfig( 'theme' , '%first% %up_page% %link_page% %down_page% %end% %header%' ); //分页样式:首页、末页等
$show = $page ->show(); // 分页显示输出
// 进行分页数据查询 注意limit方法的参数要使用page类的属性
$datas = $role ->where( $where )->order( 'id desc' )->limit( $page ->firstrow. ',' . $page ->listrows)->select();
$this ->assign( 'datas' , $datas ); // 赋值数据集
$this ->assign( 'page' , $show ); // 赋值分页输出
if (is_ajax){
$this ->display( 'index_ajax' );
} else {
$this ->display();
}
}
|
ajax-page
是模版中用于替换局部页面的id
index_ajax
是局部页面模版
扩展小部件extwidget
我是在admin
模块下建的这个类/application/admin/widget/extwidget.class.php
所有如下图
前台模版
我有个index.html
模版,这个页面需要ajax分页,现在我建立一个index_ajax.html
模版,如下图
index.html
是有布局的模版,显示ajax分页地方的关键代码如下
?
1
2
3
4
5
6
7
8
9
10
11
12
|
<table id= "users" class = "table table-bordered table-hover table-striped" >
<thead>
<tr>
<th><input class = "check-all" type= "checkbox" /></th>
<th width= "90%" >名称</th>
<th width= "10%" >操作</th>
</tr>
</thead>
<tbody id= "ajax-page" >
{:w( 'ext/renderpartial' , array ( 'data' => array ( 'partial' => 'role/index_ajax' , 'data' => $datas , 'page' => $page )))}
</tbody>
</table>
|
第一次页面加载的时候不是ajax渲染的页面,所以这里要调用一次index_ajax模版。当点击分页时ajax会替换掉这里的<tbody id="ajax-page"></tbody>
内容
?
1
|
{:w( 'ext/renderpartial' , array ( 'data' => array ( 'partial' => 'role/index_ajax' , 'data' => $datas , 'page' => $page )))}
|
index_ajax.html
是没有布局的模版,只是为了显示数据。代码如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<notempty name= "datas" >
<volist name= "datas" id= "vo" >
<tr>
<td><input class = "ids" type= "checkbox" name= "id[]" value= "{$vo.id}" /></td>
<td>{ $vo .name}</td>
<td>
<span class = "btn btn-xs btn-primary mysave" data-toggle= "modal" data-id= "{$vo.id}" data-url= "{:u('/admin/role/update')}" ><span class = "glyphicon glyphicon-edit margin-r-2" aria-hidden= "true" ></span>修改</span>
<a class = "confirm ajax-get btn btn-xs btn-primary" href= "{:u('/admin/role/del',array('id'=>$vo['id']))}" ><span class = "glyphicon glyphicon-remove" aria-hidden= "true" ></span>删除</a>
</td>
</tr>
</volist>
< else />
<tr><td colspan= "100" class = "text-center" >没有查询到数据!</td><tr>
</notempty>
<notempty name= "page" >
<tr><td colspan= "100" class = "text-right" >{ $page }</td><tr>
</notempty>
|
js代码如下
效果图
html代码
- <formclass="navbar-form"role="search"id="search-form"method="get"action="{:u('/admin/role/index')}">
- <divclass="form-group">
- 名称:<inputclass="form-control"name="name"type="text">
- </div>
- <buttontype="submit"class="btnbtn-primary"id="my-search"><spanclass="glyphiconglyphicon-glassmargin-r-2"aria-hidden="true"></span>查询</button>
- </form>
js代码
效果图
可以看到分页的中已经有参数了,并且整个查询过程都是ajax无刷新查询。
以上所述是小编给大家介绍的thinkphp 整合bootstrap ajax分页样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!
原文链接:http://www.cnblogs.com/niuboren/archive/2016/12/23/6213536.html
相关文章
猜你喜欢
- 64M VPS建站:能否支持高流量网站运行? 2025-06-10
- 64M VPS建站:怎样选择合适的域名和SSL证书? 2025-06-10
- 64M VPS建站:怎样优化以提高网站加载速度? 2025-06-10
- 64M VPS建站:是否适合初学者操作和管理? 2025-06-10
- ASP.NET自助建站系统中的用户注册和登录功能定制方法 2025-06-10
TA的动态
- 2025-07-10 怎样使用阿里云的安全工具进行服务器漏洞扫描和修复?
- 2025-07-10 怎样使用命令行工具优化Linux云服务器的Ping性能?
- 2025-07-10 怎样使用Xshell连接华为云服务器,实现高效远程管理?
- 2025-07-10 怎样利用云服务器D盘搭建稳定、高效的网站托管环境?
- 2025-07-10 怎样使用阿里云的安全组功能来增强服务器防火墙的安全性?
快网idc优惠网
QQ交流群
您的支持,是我们最大的动力!
热门文章
-
2025-06-04 71
-
2025-06-04 77
-
2025-05-27 88
-
2025-06-04 17
-
2025-05-29 89
热门评论