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 ...
随机推荐
- (23)IO之打印流 PrintStream & Printwriter
PrintStream PrintStream可以接受文件和其他字节输出流,所以打印流是对普通字节输出流的增强,其中定义了很多的重载的print()和println(),方便输出各种类型的数据. Pr ...
- 面试 -- ListView对其指定的子Item进行单独的刷新
1,最近在面试题目的时候突然看到了问题"ListView对其指定的子Item进行单独的刷新",当时感觉一脸懵逼,还是第一次听到这个问题,也就是不能使用adapter.notifyD ...
- 新手向:Java基础知识
Java 接口 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并 ...
- oracle备份脚本
利用EXP导出全库,必须用SYSTEM或者DBA用户来导出. 具体脚本实现如下 全库导出(fullbackup): #!/bin/bash bname=`date +%Y%m%d` cd /backu ...
- Linux之sort命令
sort - sort lines of text files 提示:如果第一个字段都相同的话,就根据第二个字段进行排序 参数: -f 忽略大小写 -b 忽略最前面的空格部分 -M 以月份的名字 ...
- 实验楼-1-Hello world!
初识实验楼,决定在上面好好的练练手. Course 1 : print "Hello world" 在虚拟机桌面,打开终端Xfce,通过运行linux指令,新建c文件,进行编辑,编 ...
- Spring Boot 注解的使用
Spring Boot 优于Spring mvc ,SSM,SSH 的一个亮点就是他使用了好多的注解. 1. @Autowired 这个注解的作用是将其他的类,接口引入,类似于之前的类的初始化等,用这 ...
- C++实现四叉树
什么是四叉树? 四叉树可以有效解决这个问题. 四叉树每一层都把地图划分四块,根据地图尺寸来决定树的层数,层数越大划分越细. 但需要对某一范围的单位筛选时,只需要定位到与范围相交的树区域,再对其区域内的 ...
- Modbus通信协议的压力测试
最近物联网都比较的火,因此,特别为各位兄弟姐妹们,奉上一款Mobus协议的测试软件,可以用来做设备的压力测试,和通信测试. 起初软件开发缘由是我们最近在开发一款设备,需要将多个DS18B20并联起来, ...
- QConf简要搭建过程
QConf的组件: ZooKeeper as the server, restore all configurations, so the limit data size of single conf ...