jQuery+Ajax+PHP实现异步分页数据显示--js可参考

最新推荐文章于 2021-03-28 03:37:13 发布

转载最新推荐文章于 2021-03-28 03:37:13 发布 · 720 阅读

本文介绍了一种使用jQuery+Ajax+PHP实现的异步分页技术。通过Ajax请求后端数据，更新页面上的分页内容而无需刷新整个页面。文章提供了具体的代码示例，包括前端页面布局、JavaScript处理逻辑及后端PHP数据处理。

这几天做毕业设计的时候需要使用到一个异步分页的功能，即翻页的时候只是刷新分页的数据而不是刷新整个页面。因为之前做项目的时候没有做过这方面的功能，所以还是纠结了挺长时间的，在网上也找了很多资料，结合自己的理解，做了一个比较简单的异步分页数据显示功能，这里使用的是jQuery+Ajax+PHP。

　　先说说基本原理吧，其实就是翻页时使用Ajax向后台传递页面参数请求某个分页的数据，后台接收到参数之后就在数据库中查询相应的记录，然后以json的格式传输给Ajax，Ajax接收到数据后，使用jQuery在html页面上移除原来旧的分页数据，添加上新的分页数据，同时根据分页情况添加分页按钮栏。

　　下面看看简单的代码实现：

1. html页面：

<body>
        <div
id="data-area">
            <ul>　　　　　　　　　　　　　　　　<!--这里添加分页数据-->　　　　　　　　　　　　　　</ul>   
        </div>
        <div
id="pageBar"><!--这里添加分页按钮栏--></div>
</body>

2. js代码：

var
curPage;        //当前页数
var
totalItem;      //总记录数
var
pageSize;       //每一页记录数
var
totalPage;      //总页数
 
//获取分页数据
function
turnPage(page)
{
  $.ajax({
    type:
'POST',
    url: commentDataUrl,    
//这里是请求的后台地址，自己定义
    data: {'pageNum':page},
    dataType:
'json',
    beforeSend:
function() {
      $("#data-area ul").append("加载中...");
    },
    success:
function(json) {
      $("#data-area ul").empty();      
//移除原来的分页数据
      totalItem = json.totalItem;
      pageSize = json.pageSize;
      curPage = page;
      totalPage = json.totalPage;
      var
data_content = json.data_content;
      var
data_html = "";
      $.each(data_content,function(index,array) {    
//添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
        data_html +=
"<li>"+array['id']+"&nbsp;"+array['name']+"&nbsp;"+array['num']+"&nbsp;"+array['flag']+"</li>";
      });
 
      $("#data-area ul").append(data_html);
    },
    complete:
function() {   
//添加分页按钮栏
      getPageBar();
    },
    error:
function() {
      alert("数据加载失败");
    }
  });
}
 
//获取分页条（分页按钮栏的规则和样式根据自己的需要来设置）
function
getPageBar()
{
  if(curPage > totalPage) {
    curPage = totalPage;
  }
  if(curPage < 1) {
    curPage = 1;
  }
 
  pageBar =
"";
 
  //如果不是第一页
  if(curPage != 1){
    pageBar +=
"<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>";
    pageBar +=
"<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'><<</a></span>";
  }
 
  //显示的页码按钮(5个)
  var
start,end;
  if(totalPage <= 5) {
    start = 1;
    end = totalPage;
  }
else 
{
    if(curPage-2 <= 0) {
        start = 1;
        end = 5;
    }
else 
{
        if(totalPage-curPage < 2) {
            start = totalPage - 4;
            end = totalPage;
        }
else 
{
            start = curPage - 2;
            end = curPage + 2;
        }
    }
  }
 
  for(var
i=start;i<=end;i++) {
    if(i == curPage) {
        pageBar +=
"<span class='pageBtn-selected'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
    }
else 
{
        pageBar +=
"<span class='pageBtn'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
    }
  }
   
  //如果不是最后页
  if(curPage != totalPage){
    pageBar +=
"<span class='pageBtn'><a href='javascript:turnPage("+(parseInt(curPage)+1)+")'>>></a></span>";
    pageBar +=
"<span class='pageBtn'><a href='javascript:turnPage("+totalPage+")'>尾页</a></span>";
  }
     
  $("#pageBar").html(pageBar);
}
 
//页面加载时初始化分页
$(function() {
  turnPage(1);
});

3. PHP代码：

//我项目中使用的是ThinkPHP框架，Ajax的请求地址是一个方法<br>public function getLabelData()
{
    $pageNum
= I('pageNum');
    $totalItem
= M('label')->count();
    $pageSize
= 6;
    $totalPage
= ceil($totalItem/$pageSize);
 
    $startItem
= ($pageNum-1) *
$pageSize;
    $arr['totalItem'] =
$totalItem;
    $arr['pageSize'] =
$pageSize;
    $arr['totalPage'] =
$totalPage;
 
    $labels
= M('label')->limit($startItem,$pageSize)->select();
 
    foreach($labels
as $lab) {
        $arr['data_content'][] =
$lab;
    }
 
    echo
json_encode($arr);
}

4. 分页按钮栏样式CSS：

#pageBar {
    text-align:
right;
    padding:
0 20px 
20px 0;
}
.pageBtn a {
    display: inline-block;
    border:
1px solid 
#aaa;
    padding:
2px 5px;
    margin :
0 3px;
    font-size:
13px;
    background:
#ECECEC;
    color:
black;
    text-decoration:
none;
    -moz-border-radius:
2px;
    -webkit-border-radius:
3px;
}
.pageBtn-selected a {
    display: inline-block;
    border:
1px solid 
#aaa;
    padding:
2px 5px;
    margin :
0 3px;
    font-size:
13px;
    background:
#187BBD;
    color:
white;
    text-decoration:
none;
    -moz-border-radius:
2px;
    -webkit-border-radius:
3px;
}
.pageBtn a:hover {
    background:
#187BBD;
    color:
white;
}