想自行刻畫一個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>
我不知道你的需求是什麼,
如果要用Laravel就直接用人家寫好的就好了,
如果你要自己刻也不是不行,
但是混著用不論在哪裡都是大忌,
除非你非常清楚自己在做什麼,
也非常清楚Laravel的每個運作流程.
在migration上還是有用到paginate()
這句話實在是看不懂,
這跟migration有什麼關係?
其實自己刻也很簡單
邏輯 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 (先不考慮效能什麼的, 我不熟
你的意思是後端使用 Controller paginate()?前端要刻出來一個分頁選單嗎?
利用 ajax 更換資料,不整個刷新畫面?
之前有找到這個教學,你可能需要這個,把它寫成JS