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)