bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式
ThinkPHP Ajax分页代码
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 \Think\AjaxPage($count,'ajax-page',10);// 实例化分页类 传入总记录数、ajax更新的局部页面ID和每页显示的记录数(10)
$Page->lastSuffix=false;
$Page->setConfig('first','首页');
$Page->setConfig('last','末页');
$Page->setConfig('header','共 %TOTAL_ROW% 条');//分页条数
$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分页地方的关键代码如下
名称操作
{:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}
第一次页面加载的时候不是ajax渲染的页面,所以这里要调用一次index_ajax模版。当点击分页时ajax会替换掉这里的
内容
{:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}
index_ajax.html是没有布局的模版,只是为了显示数据。代码如下
{$vo.name}
修改
删除
没有查询到数据!{$page}
js代码如下
//ajax分页查询
function ajax_show(id,url){
//加载图片
$('#ajax-loading-img').html('');
//ajax获取内容后并替换掉原有信息
$.get(url,function(data){$("#"+id).html(data);});
returnfalse;
}
效果图
ThinkPHP Ajax分页带参数查询
html代码
名称:
查询
js代码
$(function(){
$('#my-search').click(function(){
var search_form=$("#search-form").serialize();//实例化查询参数
var url="{:U('/Admin/Role/index')}"+'?'+search_form;//查询url
return ajax_show('ajax-page',url);//调用ajax分页
});
});
效果图
可以看到分页的中已经有参数了,并且整个查询过程都是Ajax无刷新查询。
以上所述是小编给大家介绍的ThinkPHP 整合Bootstrap Ajax分页样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式相关推荐
- 织梦 ajax 返回,Dede织梦arclist标签+Ajax实现织梦首页分页-叙述织梦
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 有时在做织梦模板的时候需要实现首页分页效果,但是织梦本身首页是不带分页功能的,那如何实现织梦首页分页呢? 用arclist标签+Ajax实现织梦首页分页 ...
- ajax往CJJTable传值,jQuery+ajax怎么样实现动态数据分页
这次给大家带来jQuery+ajax怎么样实现动态数据分页,用jQuery+ajax实现动态数据分页的注意事项有哪些,下面就是实战案例,一起来看一下. 用jQuery实现页码跳转式动态数据分页这个效果 ...
- m_Orchestrate learning system---二十四、thinkphp里面的ajax如何使用
m_Orchestrate learning system---二十四.thinkphp里面的ajax如何使用 一.总结 一句话总结:其实ajax非常简单:前台要做的事情就是发送ajax请求过来,后台 ...
- php用户名框架,ThinkPHP框架结合Ajax实现用户名校验功能示例
本文实例讲述了ThinkPHP框架结合Ajax实现用户名校验功能.分享给大家供大家参考,具体如下: 在模板文件中通过ajax获取到用户名,然后在控制器中将用户名与数据库比较,返回校验结果给模板文件. ...
- 利用Ajax实现DataGrid无刷新分页(AjaxGrid)【转】
利用Ajax实现DataGrid无刷新分页(AjaxGrid) DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示.数据多的时候免不了要分页显示,DataGrdi本身自带分页功能 ...
- AJAX+php实现分页器:分页展示数据
效果图: .html <style>*{margin:0px;padding: 0px;}.pagination{width: 800px;height: 40px;border:1px ...
- bootstrap分页css样式,修改bootstrap-table中的分页样式
使用bootstrap-table时,使用$("")选择器没办法选中下方的分页button按钮,可能跟它是动态生成的有关吧. 最终找到与之对应的js(bootstrap-table ...
- ThinkPHP+JQuery实现ajax无刷新登录验证(详解+相关问题)
ThinkPHP+JQuery实现ajax无刷新登录验证 摘要: 使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知,而jquery对ajax传递进行了封装和优化,因此通过 ...
- ASP.NET MVC+Bootstrap个人博客之打造清新分页Helper(三)
0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 有点另类,分页直接是在后台拼接好html,然后发送到前台的: 1. 分页容器: ...
最新文章
- The following signatures couldn't be verified because the public key is not available: NO_PUBKEY XXX
- 共享一个调用微信公众平台接口的客户端类库
- python教程:__file__、__name__、__dict__三个方法的作用
- python高级属性 用法 编程_python高级编程之面向对象高级编程
- oracle 新增加控制文件,Oracle增加控制文件副本
- 获取批量导入数据后,所产生所有自增ID的值
- 【动力学】基于matlab GUI汽车动力学分析系统【含Matlab源码 1050期】
- mysql中用来取余数的函数是_MySQL 常用函数总结
- 贴片铝电容识别及型号_贴片式铝电解电容常用型号封装
- web前端开发技术实验与实践(读书笔记)
- 企业网站专业性诊断评价
- 创建 C++ WinRT 组件
- AtCoder Beginner Contest 121
- 扁平化设计与质感设计: 他们有什么不同?
- sublime 使用浏览器不反应
- 我是怎样使用BoundsChecker的
- i3 1005G1和 i5 1035G1 哪个好
- 数据集成的两种架构:ELT和ETL
- 电脑用户名中文改英文步骤总结
- 《黄帝内经.上古天真论》养生秘诀节选-1
热门文章
- 打造国产技术产品的必要性
- LCD/HDMI OUT调试经验(1)------驱动软件架构
- 用python实现局域网内共享文件
- 基于SPSS的K均值算法
- 树莓派已经通过网络连接通过串口通信在串口调试小助手打印与操作
- 网站常见HTTP状态(304,200 OK等)查询详解
- python运行系统找不到指定文件_系统找不到指定文件_系统找不到指定的文件_python 系统找不到指定的文件 - 云+社区 - 腾讯云...
- Yii2如何使用Yii:t()
- 安装坑——rational rose
- 淘客推广 25%高佣金产品旺季来袭