iT邦幫忙

1

Laravel ajax pagination 自刻... (已解決,附上個人解答)

想自行刻畫一個pagination,但是在Controller上還是有用到paginate()/images/emoticon/emoticon16.gif
現在感到不知所措,邏輯撞牆,不太曉得該如何繼續實行刻畫(pre < 1、2、3 > next)的構思,想詢問該如何做更改或是邏輯構思,已盡量避免便利的套件為主,可能會與上面paginate有點矛盾
CategoryController.php

public function index(Request $request)
    {
        $data = Category::paginate(3);
        if($request->ajax()){
            return response()->json($data);
        }
        return view('categories.index', compact('data'));
    }

Category.php

class Category extends Model
{
    protected $table = 'categories';
    protected $fillable = ['name'];
}

index.blade.php

<div class="card-body" id="table_data">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Products</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="shwo_categories">
    </tbody>
    <tfoot name="data_tables_bea">
      <tr>
        <th>Name</th>
        <th>Products</th>
        <th>Action</th>
      </tr>
    </tfoot>
  </table>
  <div name="pagination_t"></div>
</div>

<script>
  $(document).ready(function(){
    function list(){
      $.ajax({
        type: "GET",
        url: "{{route('categories.index')}}",
        dataType: "json",
        success: function(data){
          let str = '';
          let tab = '';
          console.log(data);
          $.each(data.data, function(index, value){
            str += '<tr>';
            str += '<td>'+value.name+'</td>';
            str += '<td></td>';
            str += '<td><button type="button" class="update" data-toggle="modal" data-target="#Edit_Modal" data-id=' + value.id + '>' + "Edit" + '</button>';
            str += '<button type="button" class="delete" data-id=' + value.id + '>' + "Delete" + '</button></td>';
            str += '</tr>';
            $('[name="data_tables_bea"]').html(str);
          });
          let page_total = Math.ceil(data.total / 3);
          console.log(page_total);
        }
      });
    }
    list();
    // $('#table_data').on('click', '.pagination a', function(){
    //   // $('li').removeClass('active');
    //   // $(this).parent('li').addClass('active');
    //   list();
    //   var page = $(this).attr('href').split('page=')[1];
    //   console.log(page);
    //   console.log('33333');
    // });
  });
</script>

分享解決方式:(這是我個人解決方式,不一定適合所有人,但可以解決我目前所遇到的問題)

<script>
  $(document).ready(function(){
    let page_total_num; // 總頁數
    var p_page

    function list(p_page){
      $.ajax({
        type: "GET",
        url: "{{route('categories.index')}}"+'?page='+p_page,
        dataType: "json",
        success: function(data){
          let str = '';
          let tab = '';
          let disabled_up='';
          let disabled_down='';
          let active='';
          $.each(data.data, function(index, value){
            str += '<tr>';
            str += '<td>'+value.name+'</td>';
            str += '<td></td>';
            str += '<td><button type="button" class="update" data-toggle="modal" data-target="#Edit_Modal" data-id=' + value.id + '>' + "Edit" + '</button>';
            str += '<button type="button" class="delete" data-id=' + value.id + '>' + "Delete" + '</button></td>';
            str += '</tr>';
            $('[name="data_tables_bea"]').html(str);
          });
          page_total_num = Math.ceil(data.total / data.to);  // to -> 每頁顯示的筆數  total -> 資料總數
          console.log('總頁數 : '+page_total_num);
          tab += '<ur class="pagination">';
          disabled_up = data.current_page == 1 ? 'disabled' : '';
          tab += '<li class="page-item '+disabled_up+'"><a class="page-link" href="#" data-page="'+(data.current_page-1)+'">‹</a></li>';
          for(let i = 1; i<=data.last_page; i++){
            active = data.current_page == i ? 'active' : '';
            tab += '<li class="page-item '+active+'"><a class="page-link" href="#" data-page="'+i+'">'+i+'</a></li>';
          }
          disabled_down = data.current_page == data.last_page ? 'disabled' : '';
          tab += '<li class="page-item '+disabled_down+'"><a class="page-link" href="#" data-page="'+(data.current_page+1)+'">›</a></li>';
          tab += '</ur>';
          $('[name="pagination_t"]').html(tab);
        }
      });
    }
    list();
    
    $('[name="pagination_t"]').on('click', '.pagination a', function(e){
      p_page = $(this).data('page');
      list(p_page);
    });
  });
</script>
froce iT邦大師 3 級 ‧ 2019-11-21 05:58:27 檢舉
如果要搭配後端做分頁,就先count出查詢結果資料有多少筆,算好總共有幾頁,傳到前端去顯示分頁條的頁數,然後前端傳你要第幾頁到後端,後端算出是從第幾筆到第幾筆,傳回結果給前端顯示,這樣而已啊
frank072 iT邦新手 5 級 ‧ 2019-11-21 18:51:35 檢舉
感謝froce幫忙
0
小魚
iT邦大師 1 級 ‧ 2019-11-21 08:22:13

我不知道你的需求是什麼,
如果要用Laravel就直接用人家寫好的就好了,
如果你要自己刻也不是不行,
但是混著用不論在哪裡都是大忌,
除非你非常清楚自己在做什麼,
也非常清楚Laravel的每個運作流程.

在migration上還是有用到paginate()

這句話實在是看不懂,
這跟migration有什麼關係?

小魚 iT邦大師 1 級 ‧ 2019-11-21 08:28:13 檢舉

如果你是想要自己寫分頁,
(在Laravel我是覺得沒有必要,
但想學也不是不行)
其實你看Laravel點擊頁碼的按鈕之後就跑出這樣,

http://localhost:9453/feedback?page=2

可見Laravel也是靠page來做分頁的,
剩下的就如force大大所說的那樣了.

frank072 iT邦新手 5 級 ‧ 2019-11-21 18:51:51 檢舉

感謝小魚幫忙

1
dragonH
iT邦大師 1 級 ‧ 2019-11-21 10:09:15

其實自己刻也很簡單

邏輯 froce大 都說完了

給你個範例

你首先會需要算總共有多少筆資料

因為你需要有這個數字才能決定你的 分頁 button 要怎麼 render

e.g.

總共有 1000 筆資料

你每一頁想要 show 10 筆資料

那就會需要 1000 / 10 個 分頁 button

當然不是一口氣全 render 出來

再來

決定每頁的內容

你會需要將

1 . 當前頁數

2 . 頁面 show 的 data 數 (10筆)

傳到後端

組完 sql 語句拿到你需要的資料

e.g.

按下第 12 頁

會將頁數 12 資料數 10 往後端傳

後端收到後

會去跟 database 要 (12 - 1) * 10(offset) ~ (12 - 1) * 10 + 10(往後 10 筆的資料)

也就是第 110 ~ 120 筆的資料

最簡單的

就是用 limit (先不考慮效能什麼的, 我不熟/images/emoticon/emoticon48.gif

sqlfiddle

frank072 iT邦新手 5 級 ‧ 2019-11-21 18:52:16 檢舉

感謝dragonH幫忙

0
海綿寶寶
iT邦大神 1 級 ‧ 2019-11-21 10:53:38

建議直接使用 Lavavel 的分頁機制
不要自己刻

請參考中文官網文件

選我正解

frank072 iT邦新手 5 級 ‧ 2019-11-21 11:33:29 檢舉

使用laravel分頁機制+額外的套件已經有完成的雛形....
只是怕自己過於依賴這些,所以棄用讓自己練習刻看看/images/emoticon/emoticon06.gif

原來如此
給你加油
/images/emoticon/emoticon08.gif

0
Victor
iT邦新手 4 級 ‧ 2019-11-21 11:46:55

你的意思是後端使用 Controller paginate()?前端要刻出來一個分頁選單嗎?

利用 ajax 更換資料,不整個刷新畫面?


之前有找到這個教學,你可能需要這個,把它寫成JS

https://www.webteach.tw/?p=781

frank072 iT邦新手 5 級 ‧ 2019-11-21 13:20:44 檢舉

是的,感謝你的幫忙/images/emoticon/emoticon41.gif

0
Darwin Watterson
iT邦新手 1 級 ‧ 2019-11-22 14:36:30

不管寫得好或壞,願於分享交流就是好的開始!
/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif

我要發表回答

立即登入回答