想自行刻畫一個pagination，但是在Controller上還是有用到paginate()
現在感到不知所措，邏輯撞牆，不太曉得該如何繼續實行刻畫(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>