ThinkPHP 整合Bootstrap Ajax分页样式

js代码如下

//ajax分页查询
function ajax_show(id,url){
//加载图片
$('#ajax-loading-img').html('<img src="/Public/img/loading.gif" class="margin-r-2" alt="加载中...">');
//ajax获取内容后并替换掉原有信息
$.get(url,function(data){$("#"+id).html(data);});
returnfalse;
}

效果图

ThinkPHP Ajax分页带参数查询

html代码

<form class="navbar-form" role="search" id="search-form" method="get" action="{:U('/Admin/Role/index')}">
<div class="form-group">
名称：<input class="form-control" name="name" type="text">
</div>
<button type="submit"class="btn btn-primary" id="my-search"><span class="glyphicon glyphicon-glass margin-r-2" aria-hidden="true"></span>查询</button>
</form>

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分页样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对易采站长站网站的支持！