正文
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请求数据分页的。
