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 ...
随机推荐
- Linux系统文件的三个重要时间详解
Linux文件三个时间的查看 Linux下使用命令stat获取文件的三个时间,先看现象 各个时间的含义: Chang time:简称ctime,一个文件或目录的更改时间.在Linux中,基本上无法知道 ...
- div的优缺点
div+css优缺点 产生背景 HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化.专用化.即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览 ...
- 01.PHP5.x编译详解
##PHP5.5编译安装 ``` wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo yum i ...
- JAVA加密算法系列-BASE64
package ***; import java.io.IOException; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...
- js对象个人理解及记录
什么是对象 对象的定义是:无序属性的集合,其属性可以包括基本值.对象或函数. var car = {}; //比如我们拿一块铁造了一辆车,这的名字叫car /建一个空对象 car.length = ...
- mysql 分析3使用分析sql 性能 show profiles ;
show variables like '%profiling%'; 查看状态 查看时间去哪了``` set profiling=1;// 打开 show profiles; 查看执行过的 ...
- 锋利的jQuery（1）——DOM对象与jQuery对象的转换
1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...
- JavaScript定时器分析
一.事件循环 JavaScript是单线程,同一个时间只能做一件事情,所以执行任务需要排队.如果前一个耗时很长,那么下一个只能等待. 1)两种任务 为了更好的处理任务,JavaScript语言的设计者 ...
- 关于ARM内核与架构的解释
本文摘自某论坛某位大神的一段回复,经典至极,copy来己用! 只要你玩过ARM内核的芯片,那么关于内核和架构,我想应该或多或少的困惑过你,看了下面的介绍,你应该会清楚很多! 好比你盖房子,刚开始因为水 ...
- R语言生成随机数
1.概述 作为一种语言进行统计分析,R有一个随机数生成各种统计分布功能的综合性图书馆.R语言可以针对不同的分布,生成该分布下的随机数.其中,有许多常用的个分布可以直接调用.本文简单介绍生成常用分布随机 ...