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。