ajax分页实现（php）
ajax分页实现（php）
使用jquery.pagination.js插件
引入js文件、css文件
<link rel="stylesheet" href="/css/pagination.css"/>
<link rel="stylesheet" href="/css/project-search.css"/>
jq文件必须在pagination前加载，否则会出错
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.pagination.js"></script>
前台添加分页div
<div id="Pagination"></div>
js代码：（由于在框架中使用所以其他参数就不去了……）
<script type="text/javascript">
$(function(){
//每页条数
var pageSize = 15; var currentPageNum = 0; var url_1 = '/search/projectcount';
var url_2 = '/search/projectlist';
var type = 'get'; var totalCount = 0;
var totalPage = 0; var initQueryString_1 =
{
name: '',
industryCode: '',
typeCode: '',
wasBindUniTechnology: '-9',
investStageCode: '',
provinceCode: ''
} var initQueryString_2 =
{
name: '',
industryCode: '',
typeCode: '',
wasBindUniTechnology: '-9',
investStageCode: '',
provinceCode: '',
pageIndex: '0',
pageSize: pageSize
} //获取总页数，产生分页
$.ajax({
url:url_1,
type:type,
data:initQueryString_1,
success : function(msg){
totalCount = msg; totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
$("#Pagination").pagination(totalPage, {
callback: pageSearch
});
$('.project-search-pages .allPage').html(totalPage); //如果数据总条数小于pageSize，则不显示分页
if (totalCount < pageSize){
$('.project-search-pages').addClass('hidden');
}
if (totalCount > pageSize){
$('.project-search-pages').removeClass('hidden');
}
}
}) //获取数据，第一页，不超过pageSize条
$.ajax({
url:url_2,
type:type,
data:initQueryString_2,
beforeSend :function(){
$(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
},
success : function(msg){
$(".project-search-list").html(msg);
}
}) //给搜索按钮添加点击事件
$('#searchBtn').click(function() {
btnSearch();
}); //给所有筛选项添加点击事件
$('.map-item-box li a').click(function(){
classifySearch();
}); //给跳转到指定页添加事件
$('.my-page-btn').click(function(){
var goPage = $('.page-go input').val() - 1;
var allPage = $(".allPage").text(); if(goPage > -1 && goPage < allPage){
//产生分页
$("#Pagination").pagination(allPage,{
callback: pageSearch,
current_page: goPage
});
//更新数据
$(".project-search-list").html(goToPage(goPage));
} else {
//清空用户跳转页数
$(".page-go input").val("");
return false;
}
//清空用户跳转页数
$(".page-go input").val(""); }); function btnSearch() { $('.map-item-box li a').removeClass('selected');
$('.map-item-box li.map-item-all-btn a').addClass('selected'); var paras =
{
name:$('#name').val(),
industryCode:'',
typeCode:'',
wasBindUniTechnology:'',
investStageCode:'',
provinceCode:''
}; $.ajax({
url: '/search/projectcount',
type: 'get',
data: paras,
success: function(msg) {
totalCount = msg;
totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
$("#Pagination").pagination(totalPage, {
callback: pageSearch
});
$('.project-search-pages .allPage').html(totalPage); //如果数据总条数小于pageSize，则不显示分页
if (totalCount < pageSize){
$('.project-search-pages').addClass('hidden');
}
if (totalCount > pageSize){
$('.project-search-pages').removeClass('hidden');
}
}
}) paras.pageIndex = 0;
paras.pageSize = pageSize; $.ajax({
url:'/search/projectlist',
type:'get',
data:paras,
beforeSend :function(){
$(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
},
success : function(msg){
$(".project-search-list").html(msg);
}
}) } function classifySearch() {
$('#name').val(''); var paras =
{
name:'',
industryCode:$("#industryCode .selected").attr('data-code'),
typeCode:$("#typeCode .selected").attr('data-code'),
wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
investStageCode:$("#investStageCode .selected").attr('data-code'),
provinceCode:$("#provinceCode .selected").attr('data-code'),
}; $.ajax({
url: '/search/projectcount',
type: 'get',
data: paras,
success: function(msg) {
totalCount = msg;
totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
$("#Pagination").pagination(totalPage, {
callback: pageSearch
});
$('.project-search-pages .allPage').html(totalPage); //如果数据总条数小于pageSize，则不显示分页
if (totalCount < pageSize){
$('.project-search-pages').addClass('hidden');
}
if (totalCount > pageSize){
$('.project-search-pages').removeClass('hidden');
}
}
}) paras.pageIndex = 0;
paras.pageSize = pageSize; $.ajax({
url:'/search/projectlist',
type:'get',
data:paras,
beforeSend :function(){
$(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
},
success : function(msg){
$(".project-search-list").html(msg);
}
}) } function pageSearch(page_index, jq) {
var paras = null;
var search_word = $('#name').val(); if (search_word == '')
paras =
{
name:'',
industryCode:$("#industryCode .selected").attr('data-code'),
typeCode:$("#typeCode .selected").attr('data-code'),
wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
investStageCode:$("#investStageCode .selected").attr('data-code'),
provinceCode:$("#provinceCode .selected").attr('data-code')
}; if (search_word != '')
paras =
{
name:$('#name').val(),
industryCode:'',
typeCode:'',
wasBindUniTechnology:'',
investStageCode:'',
provinceCode:''
}; paras.pageIndex = page_index;
paras.pageSize = pageSize; //alert(paras.pageIndex) $.ajax({
url:'/search/projectlist',
type:'get',
data:paras,
beforeSend :function(){
$(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
},
success : function(msg){
$(".project-search-list").html(msg);
}
}) } function goToPage(page_index) {
var paras = null;
var search_word = $('#name').val(); if (search_word == '')
paras =
{
name:'',
industryCode:$("#industryCode .selected").attr('data-code'),
typeCode:$("#typeCode .selected").attr('data-code'),
wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
investStageCode:$("#investStageCode .selected").attr('data-code'),
provinceCode:$("#provinceCode .selected").attr('data-code')
}; if (search_word != '')
paras =
{
name:$('#name').val(),
industryCode:'',
typeCode:'',
wasBindUniTechnology:'',
investStageCode:'',
provinceCode:''
}; paras.pageIndex = page_index;
paras.pageSize = pageSize; $.ajax({
url:'/search/projectlist',
type:'get',
data:paras,
beforeSend :function(){
$(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
},
success : function(msg){
$(".project-search-list").html(msg);
document.body.scrollTop=0;
}
}) } }) </script>
后台php 实现，主要是提供数据由前台传递的pageindex ,pagesize 来查询数据并返回
//搜索页
$con = trim($_GET['title']);
$pageIndex = isset($_GET['pageIndex']) ? $_GET['pageIndex']:'';
$pageSize = isset($_GET['pageSize']) ? $_GET['pageSize']:'';
$pageIndex = $pageIndex*$pageSize;//偏移量
$map['isshow'] = 2;
$ip = get_client_ip(); $map['title'] = array('like', "%$con%");
// 多表联查
$proinfo = M("project")->alias('p')
->join("user as u on p.uid = u.id ",'left')
->join("project_type as t on p.type = t.id ",'left')
->where($map)
->field("p.id,p.siteid,title")
->order('addtime desc')
->limit($pageIndex,$pageSize)
->select();
if(empty($proinfo)){
$error = '暂时没有相关信息！';
$this->ajaxReturn(array('status'=>0,'msg'=>$error));
}else{ $this->ajaxReturn(array('status'=>1,'dataList'=>$proinfo));
}
实现起来不是很复杂，理一下思路就好了。
参考网址：http://cy.ncss.org.cn/search/projects 这个网站也是通过ajax请求数据分页的。
ajax分页实现（php）的更多相关文章
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- laraver ajax分页
,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 ); include($path); $content = ob_get_cle ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- php--yii框架中的ajax分页与yii框架自带的分页
要想使用Yii分页类 第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = Zhao::f ...
随机推荐
- iPhone safari中Document事件不触发的解决方案 [冒泡]
写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){ //隐藏代码 }); 各大浏览器都没问题,唯独iPhone上的不会触发事件 ...
- wireshark过滤规则
WireShark过滤语法 1.过 滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.ad ...
- ASP.NET使用ajax实现分页局部刷新页面
listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) & ...
- iOS 上传文件
NSString *boundry = @"boundry";//分节符 NSMutableURLRequest *mutableRequest = [NSMutableURLRe ...
- Session的两种实现
1.若果浏览器支持cookies,则可以使用临时cookies 2.若不支持,则使用request.encodURL();重写url
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- java学习常遇问题及解决方案
eclipse中的项目运行时不出现run as→java application选项? 解决方案☞必须有正确的主方法,即public static void main(String[]args){}
- iOS 一个方法首次安装滚播图 展示应用简介
//第一次安装时会有引导页展示 非第一次直接进入应用页 if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"isOne&q ...
- GDOI2014模拟pty爬山（mountain）
pty爬山(mountain) 在Pty学校附近,有一座名之为岳之麓的高山.Pty很喜欢和(哔--)一起爬山.山的平面模型如下:山由一个顶点集:A1,A2-An给定,保证Ai的x单调递增.我们将Ai和 ...
- 【Egret】Lakeshore 使用中的一些疑难解决技巧！
用Lakeshore 1.2.1版本发布的html,会出现一些用户不想要的东西,下面讲讲如何去掉: 一.问题:游戏或者动画在PC端也能跟随游览器自适应. 解决方法:①找到发布文件下的 egret_l ...