bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式

article/2025/10/20 8:44:31

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

46552e266c5a5e3328073d9a92ec20eb.gif

前台模版

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

3458a68f333ada7c9f5beb96a0eed4cf.gif

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;

}

效果图

a70bb9a55da2a38a021c9e46e1a60ece.gif

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分页

});

});

效果图

c5713c69b63dbaae4c3b679a11b578e2.gif

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

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


http://chatgpt.dhexx.cn/article/Ch0xkVcU.shtml

相关文章

Ajax实现分页查询

1. 项目效果图2. 实现步骤2.1 数据库环境搭建2.1.1 emp表2.1.2 dept表 2.2 项目基板搭建2.2.1 目录搭建2.2.2 导包2.2.3 MybatisUtil工具类编写2.2.4 MyFilter过滤器编写2.2.5 BaseServlet编写2.2.6 基础页面index.jsp实现 2.3 页面加载自动全部查询2.3.1 实体类Emp.java编写2.…

实现Ajax分页

<!-- 引入jQuery的类库 --> <script type"text/javascript" scr"js/jquery-3.3.1.js"></script> <!-- 另起一个script块 --> <script type"text/javascript"> //页面载入函数 $(function(){ …

jquery ajax 分页 java_jquery +ajax 分页实现

分页 a{text-decoration: none} .content{width:1000px;margin:0 auto;padding-top:50px;} .left-col{float:left;width:700px} .right-col{float:right;width:300px} table{width:100%} table{border-collapse:collapse;border-spacing: 0} table tr{border:1px solid #ccc;he…

ajax分页插件哪个好用,分享精心挑选的12款优秀jQuery Ajax分页插件和教程

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高&#xff0c;如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。1.Client-side jQuery pagination plugin : jPages jPages是一款非常不错的客户端分页插件&…

tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效

Thinkphp 5.1采用Ajax分页后&#xff0c;首页自然不是问题&#xff0c;但是后续的页面链接仍然指向原地址&#xff1b;虽然可以取回数据&#xff0c;但是没有样式的渲染——因为此时的页面只有“一部分”本身就没有CSS样式&#xff01; 解决的办法有很多&#xff0c;比如重新创…

DataTables PHP AJAX 分页

DataTables 是一个 jQuery 插件&#xff0c;可以更轻松地在网页上添加分页。 只需要添加记录列表&#xff0c;它就会自动调整数据并创建具有搜索和排序功能的分页。 有一些选项可用于实现AJAX 分页。 在本教程中&#xff0c;我将展示如何使用 PHP 在 DataTables 中实现 AJAX …

html ajax分页,简单ajax 分页

简单分页&#xff1a; 效果图&#xff1a; 思路&#xff1a; 数据渲染》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator() 点击分页和下一页的时候&#xff0c;重新请求数据渲染&#xff0c;对应的数据重新遍历。 代码实现&#xff1a; html:分页测…

Ajax做分页

用这种ajax做分页的方法比较简单&#xff0c;把代码直接复制就可以&#xff0c;然后根据实际更改一下里面的参数。 1.设置分页显示显示的样式&#xff0c;显示效果如下。 <style type"text/css"> *{ margin:0px auto; padding:0px; font-family:"微软雅黑…

ajax实现分页操作

利用ajax请求数据的特点&#xff0c;来实现分页操作。 主要是利用ajax进行后端分页&#xff0c;当点击对应的页数&#xff0c;ajax请求数据库对应的数据&#xff0c;后端分页可以降低前端请求数据的压力&#xff0c;页面渲染起来比较流畅。 根据后台请求的数据&#xff0c;来创…

XUnit测试框架-Python unittest

选择 语言选择 本次个人作业我选择的语言是Python,了解学习Python有一段时间了但是一直没有练习&#xff0c;所以这次玩蛇&#xff0c;使用的版本是Python3.6。 开发工具选择 我选择的IDE是Pycharm,个人认为Pycharm是一款不错的Py开发工具&#xff0c;用起来得心应手&#xff0…

单元测试-xUnit

单元测试-xUnit Assert常用方法 名称描述Eqalexpected.result)断言结果与期望值相等。该方法的重载版本用于比较不同的类型和集合。该方法的另一种版本接受一个额外参数该对象实现了用于比较对象的IEqualityComparer接口NotEqual(expected,result)断言结果不等于期望值True(r…

xUnit安装及注意事项

前言 对于单元测试&#xff0c;想必大家都已再熟悉不过了&#xff0c;同时单元测试的重要性也越发突出&#xff0c;在招聘中也特别强调单元测试&#xff0c;但是对于微软内置的单元测试还是太过于繁琐&#xff0c;于是都在寻找一种简洁并且更加轻量的测试工具。用的最多的莫过于…

Xunit.net 单元测试学习——按顺序测试

最近一直在提高编码的质量&#xff0c;为了保证质量&#xff0c;必须有一套趁手的兵器&#xff0c;Xunit.Net 就是如此霸气的利器。 怎么编写单元测试 怎么会有如此低级的疑问呢&#xff1f;因为从接触单元测试&#xff0c;到使用上&#xff0c;真的不是一个简单的心路历程&am…

单元测试-xUnit总结

xUnit总结 什么是xUnit xUnit.net是针对.NET Framework的免费&#xff0c;开源&#xff0c;以社区为中心的单元测试工具。 自动化测试的优点 可以频繁的进行测试可以在任何时间进行测试&#xff0c;也可以按计划定时进行&#xff0c;例如&#xff1a;可以在半夜进行自动化测…

单元测试之 Xunit

&#xfeff;&#xfeff; 单元测试项目中引入 xunit.dll 1. 有类 Common&#xff0c;中有方法 Divide(int a, int b)&#xff0c;代码如下 public class Common {public int Divide(int a, int b){if (b 0)return 0;return a / b;} } 2. 在单元测试项目中为方法 Divide 写单元…

使用 xunit 编写测试代码

使用 xunit 编写测试代码 Intro xunit 是 .NET 里使用非常广泛的一个测试框架&#xff0c;有很多测试项目都是在使用 xunit 作为测试框架&#xff0c;不仅仅有很多开源项目在使用&#xff0c;很多微软的项目也在使用 xunit 来作为测试框架。 Get Started 在 xunit 中不需要标记…

C#_Unit Testing 一(xUnit)

一、前言 在VS中新建一个xunit的项目&#xff0c;该项目中已经自动安装了一些Nuget包&#xff0c;其中一个关键的就是xunit&#xff0c;https://xunit.net/。 同时&#xff0c;在同一个解决方案下我们也新建了一个类库&#xff0c;这个类库就是需要被测试的。这里提一点&…

在.NET开发中的单元测试工具之(2)——xUnit.Net

在上一篇《在.NET开发中的单元测试工具之(1)——NUnit》中讲述了如何使用NUnit在.NET开发中进行单元测试以及NUnit的一些缺点&#xff0c;今天将讲述如何使用xUnit.Net来进行单元测试。 xUnit.Net介绍 xUnit.net的创造者的创造者是Jim Newkirk和Brad Wilson从包括NUnit及其它单…

单元测试中Assert详解-xUnit

前一篇&#xff1a;详谈单元测试-xUnit 简介 Assert 是基于代码的返回值、对象的最终状态、事件是否发生等情况来评估测试的结果。Assert 的结果可能是 Pass 或者 Fail。如果所有的 Asserts 都通过了&#xff0c;那么整个测试就通过了。如果任何 Asserts 失败了&#xff0c;那…

xUnit-Moq框架

基于上一次的单元测试-xUnit进行 Models文件夹 Staff类修改为&#xff1a; public class Staff { public int Id { get; set; } public string Name { get; set; } public string State { get; set; } public int Age { get; set; } } 创建一个IRepository接口…