var data = [{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.23-收益发放","createTime":"2018-12-24 06:58:16","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"街电充电宝","createTime":"2018-12-23 20:24:59","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"上海星巴克咖啡经营有限公司","createTime":"2018-12-23 19:15:33","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-23 15:59:08","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"宋城演艺发展股份有限公司","createTime":"2018-12-23 15:49:44","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"二维火智能点餐","createTime":"2018-12-23 13:20:33","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"转账","createTime":"2018-12-23 10:26:00","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.22-收益发放","createTime":"2018-12-23 06:10:18","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"便利超市杭州莫干山路店","createTime":"2018-12-22 20:50:30","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"便利超市杭州莫干山路店","createTime":"2018-12-22 20:48:44","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"包子店杭州莫干山路店","createTime":"2018-12-22 12:27:41","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-22 12:23:29","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-22 12:20:11","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-22 12:17:00","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-22 12:11:43","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.21-收益发放","createTime":"2018-12-22 06:13:22","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-21 17:29:13","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.20-收益发放","createTime":"2018-12-21 09:56:19","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"支付码:340325 金牛座潮汕牛肉火锅(杭州店)(6637060228791666498)-0226","createTime":"2018-12-20 21:03:25","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"公交-K155-车号[65837] 19:45","createTime":"2018-12-20 19:45:58","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"公交-K155-车号[65837] 19:45","createTime":"2018-12-20 19:45:50","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-20 12:10:34","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-20 12:10:00","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.19-收益发放","createTime":"2018-12-20 05:45:23","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"甜空题杭州莫干山路店","createTime":"2018-12-19 23:32:59","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"580049杭州美莱大厦店购物","createTime":"2018-12-19 23:25:47","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"公交-K107-车号[77927] 21:39","createTime":"2018-12-19 21:39:32","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.18-收益发放","createTime":"2018-12-19 07:54:38","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"锦鲤门票*1","createTime":"2018-12-18 08:43:15","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.17-收益发放","createTime":"2018-12-18 06:00:45","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-17 12:08:32","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.16-收益发放","createTime":"2018-12-17 07:57:15","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-16 21:32:50","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-16 13:53:43","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.15-收益发放","createTime":"2018-12-16 09:18:45","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"公交-K185-车号[67582] 14:45","createTime":"2018-12-15 14:45:44","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"公交-K22-车号[37425] 11:14","createTime":"2018-12-15 11:14:47","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"小米之家订单[SA1181215125202852]","createTime":"2018-12-15 10:47:54","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.14-收益发放","createTime":"2018-12-15 08:31:39","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"183-5594-7698 安徽移动 手机 50元话费充值 直充快充","createTime":"2018-12-14 13:27:00","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-14 12:10:36","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.13-收益发放","createTime":"2018-12-14 09:39:25","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"高德地图打车订单","createTime":"2018-12-14 00:11:54","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.12-收益发放","createTime":"2018-12-13 06:24:15","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-12 12:07:04","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.11-收益发放","createTime":"2018-12-12 08:58:19","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"牛哥的凉皮铺杭州大厦501广场店","createTime":"2018-12-11 12:11:39","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.10-收益发放","createTime":"2018-12-11 08:09:48","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"转账","createTime":"2018-12-10 18:52:16","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"信用卡还款","createTime":"2018-12-10 15:02:38","isSuccess":"还款成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.09-收益发放","createTime":"2018-12-10 06:48:27","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.08-收益发放","createTime":"2018-12-09 06:16:45","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"来电-充电宝","createTime":"2018-12-09 02:13:00","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"商品","createTime":"2018-12-09 01:50:55","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"牛哥的凉皮铺杭州大厦501广场店","createTime":"2018-12-08 12:06:09","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-2018.12.07-收益发放","createTime":"2018-12-08 09:03:56","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"转出到网商银行","createTime":"2018-12-08 07:25:03","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-自动转入","createTime":"2018-12-08 01:38:21","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-单次转入","createTime":"2018-12-07 09:43:19","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"余额宝-单次转入","createTime":"2018-12-07 09:42:59","isSuccess":"交易成功",},{"chargeMoney":"0.00","commodityName":"主动还款-花呗2018年12月账单","createTime":"2018-12-07 09:41:37","isSuccess":"还款成功",}]
//思路：拿到整个json数据，把整个json切割成若干个数组，如：切割成如下的每页显示5条数据的数组，那么总共61条数据就会被切割成13个数组，所以在做分页的时候第一个数组就对应渲染的第一页。
var page = function (pageSize, total, pageNum) {
var pageSize = pageSize;//每页数据条数
var pageTotal = Math.ceil(total.length / pageSize);//总共多少页
var pageNum = pageNum - 1 || 0;//页码pageNum-1是因为pageNum初始值一般为1
function cutArry() {
let arr = [];
for (let i = 0; i < pageTotal; i++) {
let len = pageSize;
let strat = i * len;
let end = strat + len;
arr.push(total.slice(strat, end));
}
return arr;
}
function renderPage() {
let html = '';
cutArry().map(function (item, index) {
html += `<li>${index + 1}</li>`
})
$('.page').html(html)
for (let i = 10; i < pageTotal; i++) {
$(`.page li:eq(${i})`).hide()//分页大于10页的页码就隐藏
}
if (cutArry().length > 1) {
$('.page li:eq(0)').before('<span class="upPage">上一页</span>');
$('.page li:last').after('<span class="nextPage">下一页</span>');
}
if ($('.page li').length > 10) {
$('.page .nextPage').before(`<span class="pagePre" style="margin-right: 5px">...</span>`)
}
}
renderPage()
//渲染数组数据,默认渲染第一个数组
function tableData(pageNum) {
let tbody = '';
let data = cutArry()[pageNum]
for (let j = 0; j < data.length; j++) {
tbody += `<tr>
<td>${cutArry()[pageNum][j].isSuccess}</td>
<td>${cutArry()[pageNum][j].chargeMoney}</td>
<td>${cutArry()[pageNum][j].createTime}</td>
<td>${cutArry()[pageNum][j].commodityName}</td>
</tr>`
}
$('tbody').html(tbody)
$('.num').remove();
$('.nextPage').after(`<span class="num" style="margin-left: 10px;">第${pageNum + 1}页</span>`);
console.log(pageNum + 1)
}
tableData(pageNum)
//点击页码或上一页和下一页
function pagenation() {
let len = $('ul li').length;
let li = $('.page').find('li');
li.map(function () {
$(this).on('click', function () {
let page = $(this).text();
pageNum = page - 1;//把当前点击的页码赋值给pageNum，这样再点击下一页或上一页的时候就在当前页码上--或++,获取到1的时候其实需要展示数组第0个数据
tableData(pageNum)
})
})
$('body').on('click', '.nextPage', function () {//下一页
if (pageNum + 1 < pageTotal) {
pageNum++;
} else {
return
}
// console.log(pageNum+1)
if (pageNum + 1 == pageTotal) {
pageNum = pageTotal - 1;
$('.pagePre').hide()
}
if (pageNum + 1 > 10) {//当页码大于10的时候就取消隐藏，注意：pageNum是数组下标所以要包括10
$(`.page li:eq(${pageNum})`).show();
$(`.page li:eq(${pageNum - 10})`).hide();
$('.forntPagePre').remove()
$('.page li:eq(0)').before(`<span class="forntPagePre" style="margin-left: 5px;">...</span>`)
}
tableData(pageNum)
})
$('body').on('click', '.upPage', function () {//上一页
if (pageNum == 0) {//当pageNum等于12的时候阻止事件执行
pageNum = 0
return
}
pageNum--;
if (pageTotal - (pageNum + 1) >= 10) {//总页数减去当前页数大于等于10的时候
// console.log(pageNum + 1)
$(`.page li:eq(${pageNum})`).show();
$(`.page li:eq(${pageNum + 10})`).hide();
$('.pagePre').remove();
$('.page .nextPage').before(`<span class="pagePre" style="margin-right: 5px;">...</span>`);
}
if (pageNum + 1 == 1) {
$('.forntPagePre').hide();
}
tableData(pageNum)
})
}
pagenation()
}
page(5, data, 1)