分页

HTML 代码段

~







.wrap {
width: 400px;
height: 200px;
}
#pagenav {
overflow: hidden;
width: 300px;
margin: 0 auto;
}
a {
display: block;
border: 1px solid lightgray;
width: 30px;
height: 20px;
float: left;
font-size: 12px;
text-align: center;
line-height: 20px;
text-decoration: none;
}
#content {
width: 400px;
height: 200px;
background: #f5f5f5;
}

totalNum = 100;//总页数
pageSize = 3;//每页显示数量
totalPage = Math.ceil(totalNum/pageSize);//总页数的计算公式
createPageNav(1);
function createPageNav(pageIndex) {
//每页页码不超过9页
//pageIndex保持在中间
var pageIndex = parseInt(pageIndex);
start = pageIndex - 4 > 0 ? pageIndex - 4 : 1;
end = pageIndex + 4 < totalPage ? pageIndex + 4 : totalPage;
end = end - start < 8 ? (start+8>totalPage ? totalPage : start+8) : end;
//如果是最后一页，向前保持所有的
if(end == totalPage) {
start = totalPage - 8 > 0 ? totalPage - 8 : 1;
}
document.getElementById('pagenav').innerHTML = "";
for(var i=start; i<=end; i++){
var a = document.createElement('a');
a.innerHTML = i;
//自定义属性 在标签a里面会显示 i
a.dataset.page = i;
a.href = "###";
a.onclick = ViewNews;
document.getElementById('pagenav').appendChild(a);
}
}
function ViewNews(){
var pageIndex = this.dataset.page;
createPageNav(pageIndex);
$.ajax({
type: "get",
url: "news.php",
data: {"pageIndex":pageIndex},
async: true,
dataType: "json",
success: function(data) {
//将新闻数据显示出来
createNews(data);
}
})
}
function createNews(data) {
var news = "";
for(var i = 0;i< data.length;i++) {
news += "

• "+data[i][0]+"
• ";
  }
  $('#content').html(news);
  }
  
  
  ~

  PHP代码段

  ~
  

  欢迎来到大瑞的微博