iT邦幫忙

0

目前在實作Paginator
遇到一些問題 想請各位大大給我個方向~“~

Material Paginator
他只有提供上一頁跟下一頁的按鈕

如果我想要自己新增數字按鈕
< 1 2 3 >
像這樣的功能
我要怎麼去更改比較好~“~

看更多先前的討論...收起先前的討論...
dragonH iT邦大師 1 級 ‧ 2019-05-08 18:48:03 檢舉
基本上就是用程式控制資料呈現的量

假設 有 30 筆資料

一次秀 10 筆

第一頁就顯示 1 - 10筆

第二頁就顯示 11 - 20 以此類推
ekekvivi iT邦新手 5 級 ‧ 2019-05-08 18:52:27 檢舉
我是說
我想要實作 有按鈕的
< 1 2 3 .. >
每個數字鍵都可以點擊切換
dragonH iT邦大師 1 級 ‧ 2019-05-08 18:59:36 檢舉
是啊

數字鍵點擊了 trigger function

就能切你的資料了阿
dragonH iT邦大師 1 級 ‧ 2019-05-08 19:08:38 檢舉
我比較熟Vue給你看個範例

https://onewaytech.github.io/vue2-datatable/examples/dist/

他上面有個 query

就是用來切資料的依據

limit(每頁顯示的資料)

offset(位移量)

1 個回答

0
dragonH
iT邦大師 1 級 ‧ 2019-05-08 20:21:27

不然就看這個簡陋的範例吧

Codepen

html

<div>
  <div class = "row">
    <div class = "col-sm-12" id = "result">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <div class = "row form-group">
    <div class = "col-sm-12 text-center" id = "pagers">
    </div>
  </div>
</div>

js

// Create data
let data = [...Array(30)].map((el, index) => { return index + 1});

// Initial pagers
let pagers = '';
for(let i = 1; i <= data.length / 5; i += 1) {
  pagers += `<button class = "btn btn-outline-success pager">${i}</button>`;
}
$('#pagers').html(pagers);

// Pagers listener
$('.pager').on('click', (e) => {
  const page = e.target.innerText;
  changePage(page);
});

// Slice data and rerender
const changePage = (page) => {
  const limit = 5; // Each page show 5 rows of data
  const offset = (page - 1) * limit; // Data offset
  let newResult = '<ul>';
  data.slice(offset, offset + limit).forEach((el) => {
    newResult += `<li>${el}</<li>`;
  });
  newResult += '</ul>';
  $('#result').html(newResult);
}

我要發表回答

立即登入回答