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

随机推荐

03.SQLServer性能优化之---存储优化系列
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概述:http://www.cnblogs.com/dunitian/p/60413 ...
分布式系列文章——Paxos算法原理与推导
Paxos算法在分布式领域具有非常重要的地位.但是Paxos算法有两个比较明显的缺点:1.难以理解 2.工程实现更难. 网上有很多讲解Paxos算法的文章,但是质量参差不齐.看了很多关于Paxos的资 ...
【Machine Learning】KNN算法虹膜图片识别
K-近邻算法虹膜图片识别实战作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
.NET Core系列： 1、.NET Core 环境搭建和命令行CLI入门
2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...
C#中将DataTable导出为HTML的方法
今天我要向大家分享一种将DataTable导出为到HTML格式的方法.有时我们需要HTML格式的输出数据, 以下代码就可以帮助我们达到目的,. 首先,我们要绑定DataTable和 DataGridV ...
当web.config文件放置在共享目录下（UNC），启动IIS会提示有错误信息500.19，伴随有错误代码0x80070003和错误代码0x80070005的解决办法
最近遇到一个很有意思的使用环境,操作人员将所有的网站应用内容投放到共享存储里面,并且使用微软的SMB协议将其以CIFS的方式共享出来,使用Windows Server 2008 R2的IIS将其连接起 ...
搭建属于自己的VIP积分系统(1)
很久没写博客了,如果有写得不好的地方,还请多多见谅. 架构设计需求分析这篇文章主要是介绍此VIP系统的基础架构.说实在的,我其实对架构方面也不是很懂,我这套框架还是拿别人的东西改过来的,并不是 ...
微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）
转载注明出处改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
MongoDB系列（二）：C#应用
前言上一篇文章<MongoDB系列(一):简介及安装>已经介绍了MongoDB以及其在window环境下的安装,这篇文章主要讲讲如何用C#来与MongoDB进行通讯.再次强调一下,我使用 ...
安卓客户端a标签长按弹框提示解决办法
昨天工作时候发现一个bug,是关于a标签的,在安卓客户端中,如果是a标签的话,长按会出现一个弹框,如图所示是因为安卓客户端的长按触发机制,以后进行wap端开发的时候,如果用到跳转页面尽量不要用a标签 ...

js ajax php分页组件

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

随机推荐

热门专题