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。

 

转载于:https://www.cnblogs.com/hiluna/p/9337620.html