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 ...
随机推荐
- IOS动态自适应标签实现
先上效果图 设计要求 1.标签的宽度是按内容自适应的 2.一行显示的标签个数是动态的,放得下就放,放不下就换行 3.默认选中第一个 4.至少选中一个标签 实现思路 首先我们从这个效果上来看,这个标签是 ...
- java学习笔记----java入门
java基础 一.java语言跨平台原理 1.什么是跨平台? 跨平台就是一个软件可以在不同的操作系统中运行,但是不需要对其修改.换句话说,java语言编写的软件在不做修改的情况下就能在不同的系统平台上 ...
- 微信web开发者工具使用
1.首先启动微信web开发者工具, 2.启动之后,点击移动端调试, 3.选择普通调试,然后,将手机和电脑置于同一个网段之中,可以通过电脑发出一个wifi,让手机连入就行 4.如果,电脑室台式机的话,没 ...
- 想系统的学习一下项目管理，推荐PRINCE2
参加pmp培训,考个pmp证书就足矣应付面试. 个人并不推荐看那些外文原版书籍,我看过一两本,水平与实用性并不是你想象的那么好,除非你是做理论研究,为了发表论文. 另一本就推荐prince2的教材,p ...
- IOS开发创建开发证书及发布App应用(八)——使用Application Loader工具上传应用
8.使用Application Loader工具上传应用 继续第七步在iTunes所创建的应用,打开应用,如下图 点击详情按钮进去之后,单击右上角Ready to Upload Binary按钮,如下 ...
- LoonAndroid自动检测输入框 --- Author: rose && lvyerose@163.com
LoonAndroid框架,同时给我们提供了一套自动检测输入规则的工具,用起来很是方便,下面介绍一下这个东东的使用方法(注意,该说明是基于项目已经集成了LoonAndroid框架而言,如果您未集成该框 ...
- 一个web应用的诞生(10)--关注好友
下面回到首页中,使用一个账户登录,你肯定已经注意到了这里的内容: 没错,现在都是写死的一些固定信息,其中分享数量很容易就可以获取,只需要修改首页模板: <p class="text-m ...
- Angular--学习
18:28:34 Angular简介 AngularJS通过指令 扩展了HTML,并通过 表达式 绑定数据到HTML Angular扩展了HTML AngularJS 通过 ng-directives ...
- Hibernate基础学习(七)—检索方式
一.概述 Hibernate有五种检索方式. 1.导航对象图检索方式 根据已经加载的对象,导航到其他对象. Order order = (Order)session.get(Ord ...
- sqlplus连接oracle问题
第一次在自己电脑上连接远端数据库,尝试了一上午居然还没成功,后来在网上找了一堆的方法终于是连接上了 -_-!! 总结一下:简单操作:一步到位 我主要是用的oracle 11g的数据库,sqlpl ...