正文

js ajax php分页组件

IP云
IP云V管理员/11 阅读
06/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

github  https://github.com/lihefen/pageList

html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/page.css">
</head>
<body>
<style type="text/css">
#financePlanInvestorTable ul li {float: left;width: 33.3333%;height: 40px;line-height: 40px;}
</style>
<div id="financePlanInvestorTable"></div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript">
//获取投资记录
function getFinancePlanInvestors(currentPage){
var pageSize = 10;
$.ajax({
dataType: 'json',
url: "api/data.php",
data: {
"pageIndex" : currentPage,
"pageSize" : pageSize,
"date" : new Date().getTime()
},
type: 'GET',
beforeSend: function() {
},
success: function(data) {

createFinancePlanInvestorTable(data);
},
error: function() {
}
});
}
getFinancePlanInvestors(1);
//创建投资记录表格
function createFinancePlanInvestorTable(data){
var financePlanInvestorTable = $("#financePlanInvestorTable");
var htmlStr = '';
var list = data.recordCount.voList;
if(list.length > 0){
for(var i=0,len=list.length;i<len;i++){
htmlStr += '<ul class="items clearfix">';
htmlStr += '<li class="col_1">'+list[i].amount+'</li>';
htmlStr += '<li class="col_2">'+list[i].assetName+'</li>';
htmlStr += '<li class="col_3">'+list[i].createTime+'</li>';
htmlStr += '</ul>';
}
htmlStr += createPager(data.recordCount.currentPage,data.recordCount.pageCount,"financePlanInvestorTablePager","getFinancePlanInvestors");
financePlanInvestorTable.html(htmlStr);
}
}
</script>
</body>
</html>

page.js

//动态创建页标签
function createPager(currentPage,pageCount,pageId,functionName){
if(currentPage == null || pageCount == null || pageId == null || functionName == null){
return;
}
currentPage = Number(currentPage);
pageCount = Number(pageCount);
var pagerHtml = '';
pagerHtml += '<div class="yPager" id="'+pageId+'"><div class="inner">';

if(currentPage>1){
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage-1) +');"> < </a>';
}else{
pagerHtml += '<span class="disabled"> < </span>';
}

var showTotalPageNum = 8;
if(pageCount > showTotalPageNum){
// 在第四页和倒数第四页之间
if(currentPage>4 && currentPage<=pageCount-4){
pagerHtml += '<a href="javascript:'+functionName+'(1);">1</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage-2) +');">'+ (currentPage-2) +'</a>';
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage-1) +');">'+ (currentPage-1) +'</a>';
pagerHtml += '<span class="current">'+ currentPage +'</span>';
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage+1) +');">'+ (currentPage+1) +'</a>';
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage+2) +');">'+ (currentPage+2) +'</a>';
pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:'+functionName+'('+ pageCount +');">'+ pageCount +'</a>';
// 第四页之前
}else if(currentPage<=4 ){
for(var i=1; i<=4 ; i++){
if(i == currentPage){
pagerHtml += '<span class="current">'+ i +'</span>';
}else{
pagerHtml += '<a href="javascript:'+functionName+'('+ i +');">'+ i +'</a>';
}
}
if(currentPage==3){
pagerHtml += '<a href="javascript:'+functionName+'(5);">5</a>';
}
if(currentPage==4){
pagerHtml += '<a href="javascript:'+functionName+'(5);">5</a>';
pagerHtml += '<a href="javascript:'+functionName+'(6);">6</a>';
}

pagerHtml += '<span>...</span>';
pagerHtml += '<a href="javascript:'+functionName+'('+ pageCount +');">'+ pageCount +'</a>';
//倒数第四页之后
}else if(currentPage>pageCount-4){
pagerHtml += '<a href="javascript:'+functionName+'(1);">1</a>';
pagerHtml += '<span>...</span>';

if(currentPage==pageCount-2){
pagerHtml += '<a href="javascript:'+functionName+'('+ (pageCount-4) +');">'+(pageCount-4)+'</a>';
}

if(currentPage==pageCount-3){
pagerHtml += '<a href="javascript:'+functionName+'('+ (pageCount-5) +');">'+(pageCount-5)+'</a>';
pagerHtml += '<a href="javascript:'+functionName+'('+ (pageCount-4) +');">'+(pageCount-4)+'</a>';
}

for(var i=pageCount-3; i<=pageCount ; i++){
if(i == currentPage){
pagerHtml += '<span class="current">'+ i +'</span>';
}else{
pagerHtml += '<a href="javascript:'+functionName+'('+ i +');">'+ i +'</a>';
}
}
}
// 小于页数限额
}else{
for(var i=1; i<=pageCount ; i++){
if(i == currentPage){
pagerHtml += '<span class="current">'+ i +'</span>';
}else{
pagerHtml += '<a href="javascript:'+functionName+'('+ i +');">'+ i +'</a>';
}
}
}

if(pageCount>=currentPage+1){
pagerHtml += '<a href="javascript:'+functionName+'('+ (currentPage+1) +');"> > </a>';
}else{
pagerHtml += '<span class="disabled"> > </span>';
}
pagerHtml += '</div></div>';
return pagerHtml;
}

data.php

<?php
header('content-type:application/json;charset=utf8');
$data = array
(
'pager'=> array(
),
'item' => array (
'vuel' => array(
array("amount" => "1000", "assetName" => "你我贷1号", "createTime" => "2016-12-13 17:18:39", "id" => "1"),
array("amount" => "5000", "assetName" => "你我贷2号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷3号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷4号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷5号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷6号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷7号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷8号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷9号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷10号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷11号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷12号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷13号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷14号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷15号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷16号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷17号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷18号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷19号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷20号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷21号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷22号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷23号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷24号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
array("amount" => "5000", "assetName" => "你我贷25号", "createTime" => "2016-12-13 17:18:39", "id" => "2"),
)
)

);

//一页三条数据
$pageSize = 3;
//读取所有数据
$dataList = $data['item']['vuel'];
//获得总页数,也是最后一页
$totalPage = ceil(count($dataList) / $pageSize);
//得到分页
$pageIndex = @intval(@$_GET['pageIndex']);

//定义输出数据格式
$result = array();
$result['recordCount'] = array();
$result['recordCount']['pageCount'] = $totalPage;
$result['recordCount']['currentPage'] = $pageIndex;
$result['recordCount']['pageSize'] = $pageSize;

$result['recordCount']['voList'] = array_splice($dataList, ($pageIndex - 1) * $pageSize, $pageSize);
echo json_encode($result);
?>