js ajax php分页组件

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>';
}

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);
?>

js ajax php分页组件的更多相关文章

基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创
简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...
jQuery ajax 实现分页 kkpager插件
代码片段一:   <link type="text/css" href=&qu ...
[js开源组件开发]ajax分页组件
ajax分页组件我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
JS表格分页组件：fupage的设计思路和详细使用方法(未来考虑开源,争取在2015年）
一.背景之前在秒针工作的时候,某js高级project师写了非常多自己的组件.当中一套是分页组件.叫做st-grid. 只是在我看来,bug太多.我常常给他反馈bug,我也不清楚为啥 ...
JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）
一.背景之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...
电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java
一.概述学习实践Web开发5年多了,直到今天,我才算真正实现了最基本最常用的分页组件. 包括: a.前端JS异步加载并渲染: b.前端JSP.Freemarker.Struts标签渲 ...
一步步编写avalon组件02：分页组件
本章节,我们做分页组件,这是一个非常常用的组件.grid, listview都离不开它.因此其各种形态也有. 本章节教授的是一个比较纯正的形态,bootstrap风格的那种分页栏. 我们建立一个ms- ...

随机推荐

a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
菜鸟Python学习笔记第一天：关于一些函数库的使用
2017年1月3日星期二大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
发布：.NET开发人员必备的可视化调试工具（你值的拥有）
1:如何使用 1:点击下载:.NET可视化调试工具 (更新于2016-12-29 19:11:00) (终于彻底兼容了部分VS环境下无法使用的问题) 2:解压RAR后执行:CYQ.VisualierS ...
rnandroid环境搭建
react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...
Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
用scikit-learn学习BIRCH聚类
在BIRCH聚类算法原理中,我们对BIRCH聚类算法的原理做了总结,本文就对scikit-learn中BIRCH算法的使用做一个总结. 1. scikit-learn之BIRCH类在scikit-l ...
算法与数据结构(八) AOV网的关键路径
上篇博客我们介绍了AOV网的拓扑序列,请参考<数据结构(七) AOV网的拓扑排序(Swift面向对象版)>.拓扑序列中包括项目的每个结点,沿着拓扑序列将项目进行下去是肯定可以将项目完成的, ...
WPF样式之画刷结合样式
第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...
JS继承之借用构造函数继承和组合继承
根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...
C++ 拷贝构造函数和赋值运算符
本文主要介绍了拷贝构造函数和赋值运算符的区别,以及在什么时候调用拷贝构造函数.什么情况下调用赋值运算符.最后,简单的分析了下深拷贝和浅拷贝的问题. 拷贝构造函数和赋值运算符在默认情况下(用户没有定义 ...

js ajax php分页组件

js ajax php分页组件的更多相关文章

随机推荐

热门专题