第10车厢-你今天table了吗?tableRWD+简易分页应用篇

本篇延续＜第9车厢-使用content:attr()实现tableRWD应用＞的版，透过程序自动产生假title<th>，并制作简单的分页功能

首先先复习一下昨篇提到的，透过<td>先事先打上data-th="我是th名称"

 <td data-th="信用卡公司">兆丰银行</td>
        <td data-th="回馈 / 名额">$300 产品（限量8万名）<br>最高5千抽奖</td>
        <td data-th="五倍券优惠活动">期限绑定台湾Pay/信用卡，可享一次抽奖，最高奖金5千元(110/12/31前)</td>
       ....等

，之後再透过::before {content: attr(data-th);....}让文字显现出来

      td::before {
        color: #01977a;
        text-indent: -1rem;
        content: attr(data-th);
        font-weight: bold;
        display: block;
      }

但是因为
1.栏位很多时，就要手动一个一个key data-th="XXX"吗?这样不是很麻烦吗?
2.范例资料是死的，真正工作上的资料是抓api後回传的，所以我们也无法先都手动key好
所以我们今天就改写成
HTML

/*html*/
<table id="" class="table_change">
  <thead>
    <tr>
      <th>信用卡公司</th>
      <th>回馈 / 名额</th>
      <th>五倍券优惠活动</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>兆丰银行</td>
      <td>$300 产品（限量8万名）<br>最高5千抽奖</td>
      <td>期限绑定台湾Pay/信用卡，可享一次抽奖，最高奖金5千元(110/12/31前)</td>
    </tr>
    
    <tr>
    ...
    </tr>

  </tbody>
</table>

jq

$(function () {
  let $table = $(".table_change"); //抓table class
  let $thRows = $table.find("thead th");  //找到每个th
  $thRows.each(function (key, thRow) { //key是0开始
    $table
      .find("tbody tr td:nth-child(" + (key + 1) + ")") //选择器第一个元素是1开始
      .attr("data-th", $(thRow).text());// 将每个td塞入data-th="对应的<th>名称"
  });
/*-----------*/
});

这样就还是完成啦！

那有时候总会碰到多笔资料的时候吧?
我们可以做一个简单的分页，像这样

分页范例

而除了可以按"上一页""下一页"外，也能让使用者输入跳入该页，
HTML

<div id="pageModule">
</div>

<div id="numberPageModule">
  <label for="numberPage">跳至第</label>
  <input id="numberPage" type="number" value="1" min="1" max="100">页
</div>

<table id="" class="table_change">
  <thead>
    <tr>
      <th>信用卡公司</th>
      <th>回馈 / 名额</th>
      <th>五倍券优惠活动</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>兆丰银行</td>
      <td>$300 产品（限量8万名）<br>最高5千抽奖</td>
      <td>期限绑定台湾Pay/信用卡，可享一次抽奖，最高奖金5千元(110/12/31前)</td>
    </tr>
    
    //等多笔资料<tr>....</tr>
    
  </tbody>
</table>

jq

goPage(参数1,参数2)为我们换页的function,参数第一个放的是目前页数，第二个放一页要秀几笔

$(function () {
  /*----产生data-th-----*/
  let $table = $(".table_change");
  let $thRows = $table.find("thead th");
  $thRows.each(function (key, thRow) {
    $table
      .find("tbody tr td:nth-child(" + (key + 1) + ")")
      .attr("data-th", $(thRow).text());
  });
  /*-----------*/
  goPage(1, 2); // 一开始先秀第一页,以及每一页最多两笔资料
});

再来
我们假设每一页只能有两笔资料显示

function goPage(currentPage, pageSize) {
  
    var tr = $(".table_change tbody tr");
    var num = $(".table_change tbody tr").length; //表格所有行数
    var totalPage = Math.ceil(num / pageSize ); // 表格所有行数/每页显示行数 = 总页数
  
    $('#numberPage').attr('max',totalPage); // 写入跳至第几页input
  
    $("#numberPage").off('change').on("change",function(){ // 当"跳至第几页"改变时....
      let numberPage =  $("#numberPage").val();//使用者输入要跳页的值
      if( numberPage > totalPage ){ //如果输入超过总页数，就跳出行为
        console.log("页数超过")
        return
     }
      goPage(numberPage, 2);//如果是正常的值，就执行换页，一样每页显示两笔
    });
 
    var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行
    var endRow = currentPage * pageSize; //结束显示的行
    endRow = (endRow > num) ? num : endRow; 
  
  
    //遍历显示资料实现分页
    for (var i = 1; i < (num + 1); i++) {
        var trRow = tr[i - 1];
        if (i >= startRow && i <= endRow) {
            trRow.style.display = "";
        } else {
            trRow.style.display = "none";
        }
    }
    
    //写入於<div id="pageModule">中
    
    var tempStr = "";
    //如果目前页数大於1，则可以按首页跟上一页
    if (currentPage > 1) {
        tempStr += `<a href="javascript:;" onClick="goPage(1,${pageSize})">首页</a>`;
        tempStr += `<a href="javascript:;" onClick="goPage(${currentPage - 1},${pageSize})">上一页</a>`;      
    } else {
        tempStr += `<a href="javascript:;" class="disabled">首页</a>`;
        tempStr += `<a href="javascript:;" class="disabled">上一页</a>`;
    }
  //放入页码 EX:1/5
        tempStr += `<div><span>第${currentPage}页</span>/<span>共${totalPage}页</span></div>`;
        
  //如果目前页数小於总页数，则无法按下一页及尾页
  
    if (currentPage < totalPage) {
        tempStr += `<a href="javascript:;" onClick="goPage(${currentPage + 1},${pageSize})">下一页</a>`;
        tempStr += `<a href="javascript:;" onClick="goPage(${totalPage},${pageSize})">尾页</a>`;
    } else {
        tempStr += `<a href="javascript:;" class="disabled">下一页</a>`;
        tempStr += `<a href="javascript:;" class="disabled">尾页</a>`;
    }

    $("#pageModule").html(tempStr);
}

附上完整程序码
透过这对新手相较易懂的范例後，之後就能再加强挑战除了"上一页""下一页"外，能有页码出现的那种，或者可以选择每一页的显示笔数拉！

本篇参考资料:
https://codepen.io/yidas/pen/eEaKRO

https://mrcodingroom.freesite.host/js%E7%B0%A1%E5%96%AE%E6%8F%9B%E9%A0%81%E7%A8%8B%E5%BC%8F%E7%A2%BC%E5%88%86%E4%BA%AB/