ThinkPHP 整合Bootstrap Ajax分页样式

2025-05-27 0 48

thinkphp ajax分页代码

?

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所有如下图

ThinkPHP 整合Bootstrap Ajax分页样式

前台模版

我有个index.html模版,这个页面需要ajax分页,现在我建立一个index_ajax.html模版,如下图

ThinkPHP 整合Bootstrap Ajax分页样式

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代码如下

  1. //ajax分页查询
  2. functionajax_show(id,url){
  3. //加载图片
  4. $('#ajax-loading-img').html('<imgsrc="/public/img/loading.gif"class="margin-r-2"alt="加载中…">');
  5. //ajax获取内容后并替换掉原有信息
  6. $.get(url,function(data){$("#"+id).html(data);});
  7. returnfalse;
  8. }

效果图

ThinkPHP 整合Bootstrap Ajax分页样式

thinkphp ajax分页带参数查询

html代码

  1. <formclass="navbar-form"role="search"id="search-form"method="get"action="{:u('/admin/role/index')}">
  2. <divclass="form-group">
  3. 名称:<inputclass="form-control"name="name"type="text">
  4. </div>
  5. <buttontype="submit"class="btnbtn-primary"id="my-search"><spanclass="glyphiconglyphicon-glassmargin-r-2"aria-hidden="true"></span>查询</button>
  6. </form>

js代码

  1. $(function(){
  2. $('#my-search').click(function(){
  3. varsearch_form=$("#search-form").serialize();//实例化查询参数
  4. varurl="{:u('/admin/role/index')}"+'?'+search_form;//查询url
  5. returnajax_show('ajax-page',url);//调用ajax分页
  6. });
  7. });

效果图

ThinkPHP 整合Bootstrap Ajax分页样式

可以看到分页的中已经有参数了,并且整个查询过程都是ajax无刷新查询。

以上所述是小编给大家介绍的thinkphp 整合bootstrap ajax分页样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对快网idc网站的支持!

原文链接:http://www.cnblogs.com/niuboren/archive/2016/12/23/6213536.html

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 ThinkPHP 整合Bootstrap Ajax分页样式 https://www.kuaiidc.com/73294.html

相关文章

发表评论
暂无评论