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- ...

随机推荐

HTML5 sessionStorage会话存储
sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.本篇主要介绍 sessionStorage(会话存储) ...
WPF做12306验证码点击效果
一.效果和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...
CRL快速开发框架系列教程五(使用缓存)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
SQL Server中SELECT会真的阻塞SELECT吗？
在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Profile跟踪会话86执行SELECT * FROM dbo.T ...
Mysql 学习之基础操作
一.表复制 1.复制表结构将表hello的结构复制一份为表hello3 2.复制数据 a.如果两张表的结构一样且你要复制所有列的数据 mysql> insert into hello3 ...
Linux自动共享USB设备：udev+Samba
一.概述公司最近要我实现USB设备插入Ubuntu后,自动共享到网络上,能像Windows共享一样(如\\192.168.1.10)访问里面的内容,不需要写入权限.当时听完这需求,我这新人表示惊呆了 ...
Performance Tuning
本文译自Wikipedia的Performance tuning词条,原词条中的不少链接和扩展内容非常值得一读,翻译过程中暴露了个人工程学思想和英语水平的不足,翻译后的内容也失去很多准确性和丰富性,需 ...
Windows Server 2008 R2常规安全设置及基本安全策略
这篇文章主要介绍了Windows Web Server 2008 R2服务器简单安全设置,需要的朋友可以参考下用的腾讯云最早选购的时候悲催的只有Windows Server 2008 R2的系统,原 ...
我的MYSQL学习心得（十）自定义存储过程和函数
我的MYSQL学习心得(十) 自定义存储过程和函数我的MYSQL学习心得(一) 简单语法我的MYSQL学习心得(二) 数据类型宽度我的MYSQL学习心得(三) 查看字段长度我的MYSQL学习心 ...
Mono+Jexus部署C# MVC的各种坑
如果你看到这篇文章,先别急着动手,过完一遍,确定是你要的再动手. 别人提到的这里不赘述,只说查了好久才知道的. 1号坑:System.IO.FileNotFoundException Could no ...

js ajax php分页组件

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

随机推荐

热门专题