jQuery--dataTable 前端分頁與后端分頁 及遇到的問題

（1）區別

前端分頁：一次性把所有數據全都放在前端，由前端進行處理；適合請求的數據量不大的情況

后端分頁：服務器模式，所有的分頁，搜索，排序等操作在服務器端完成，然后前端去請求數據；適合量大的情況

（2）前端分頁

前端分頁比較簡單

引用jquery.js 和 jquery.dataTables.js即可

（3）后端分頁

https://datatables.net/examples/server_side/simple.html

（4）遇到的問題：datatables 行元素事件翻頁后失效問題

參考鏈接： https://blog.csdn.net/qq_36330228/article/details/80699311

　　a, bug現象

使用前端分頁方式，導致只有第一頁內table的行元素可以“編輯”‘刪除’， 后面的分頁點擊無反應。

　　  b,bug原因

前端分頁方式是一次性將所有的數據加載到頁面，然后dataTable.js會去分頁的，數據請求只會在第一頁，所有的 js 只會加載在第一頁上面。所以當翻頁的時候，數據不會向服務器請求數據，頁面不會再加載，出現分頁按鈕時效的問題

　　  c,解決措施

1，使用后端分頁的方式（但是不適用於頁面數據量較小的情況）；

2，在前端分頁的情況下，將事件綁定到table上，這樣翻頁之后，js 會隨着dataTable的更新而更新。

 

//使用jquery
$("#table tbody").on('click', '.btn-edit', function(){...}

 

其中，#table 為表格的id；  .btn-edit 為編輯按鈕的class。