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

随机推荐

Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
CRC、反码求和校验原理分析
3月份开始从客户端转后台,算是幸运的进入全栈工程师的修炼阶段.这段时间一边是老项目的客户端加服务器两边的维护和交接,一边是新项目加加加班赶工,期间最长经历了连续工作三天只睡了四五个小时的煎熬,人生也算 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
了不起的 nodejs-TwitterWeb 案例 bug 解决
了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...
算法与数据结构(十四) 堆排序 (Swift 3.0版)
上篇博客主要讲了冒泡排序.插入排序.希尔排序以及选择排序.本篇博客就来讲一下堆排序(Heap Sort).看到堆排序这个名字我们就应该知道这种排序方式的特点,就是利用堆来讲我们的序列进行排序.&quo ...
页面布局class常见命名规范
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
Javascript学习笔记
Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言组成部分 1. ECMAscript JS标准 2. DOM 通过J ...
npm源切换
版权声明:欢迎转载,请附加转载来源:一路博客(http://www.16boke.com) 目录(?)[+] 安装使用列出可选的源切换增加源删除源测试速度许可项目主页我们介绍 ...
搭建TFS 2015 Build Agent环境(一)
Download the build agent Downloading the build agent is really simple. Navigate to your TFS control ...
mono for android Json 上传文件
void button_Click(object sender, EventArgs e) { string Url = "上传地址,服务器端负责接收"; byte[] fbyte ...

js ajax php分页组件

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

随机推荐

热门专题