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。