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。
jQuery--dataTable 前端分页与后端分页 及遇到的问题的更多相关文章
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
- django项目一 分页器(前端分页和后端分页区别)
1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- jquery datatable如何动态分页
展开全部 一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: &qu ...
- jquery datatable 获取当前分页的数据
使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...
- datatables后端分页
0x01 缘由 平时较少涉及前端,这次本以为模板中有表单,分页跳转搜索功能都比较齐全,可以高枕无忧,但是细看模板中的分页跳转是不需要与后台交互的,数据一次性写在前端,再有前端插件完成分页. 这种方式肯 ...
- bootstrap table 前后端分页(超级简单)
前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...
- datatables跳转自定义页面(后端分页)
在后端分页的情况下,怎么做到跳转自定义页面? 0x01 难点: 一. 怎么添加自定义代码? 前提:datatables在整个html加载完毕后,进行datatables数据的渲染,并且把右下角的 “上 ...
- python 进行后端分页详细代码
后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...
随机推荐
- 洛谷 UVA1395 苗条的生成树 Slim Span
题目链接 题目描述 求所有生成树中最大边权与最小边权差最小的,输出它们的差值. 题目分析 要求所有生成树中边权极差最小值,起初令人无从下手.但既然要求所有生成树中边权极差最小值,我们自然需要对每一棵生 ...
- JS 点击验证码刷新
<img src="/get_valid_img" id="valid-img" title="点击再换一张" class=" ...
- 「 从0到1学习微服务SpringCloud 」01 一起来学呀!
有想学微服务的小伙伴没?一起来从0开始学习微服务SpringCloud,我会把学习成果总结下来,供大家参考学习,有兴趣可以一起来学!如有错误,望指正! Spring .SpringBoot.Sprin ...
- HGE引擎改进——2014/1/27
2014/1/27 更新 hge库: 1.增加回调函数procResizeFunc(),这个函数会在窗口大小改变时调用,不是必要函数 2.修复LOG信息显示为乱码的错误 项目主页:https://co ...
- 面向初学者的指南:创建时间序列预测 (使用Python)
https://blog.csdn.net/orDream/article/details/100013682 上面这一篇是对 https://www.analyticsvidhya.com/blog ...
- Java容器解析系列(14) IdentityHashMap详解
IdentityHashMap,使用什么的跟HashMap相同,主要不同点在于: 数据结构:使用一个数组table来存储 key:value,table[2k] 为key, table[2k + 1] ...
- Referer防盗链
一.目录展示 分为AProject和BProject两个项目进行测试 二.修改c:\windows\system32\drivers\etc下的hosts文件 三.aindex.jsp 四.binde ...
- springIOC源码接口分析(一):BeanFactory
一 应用场景 BeanFactory接口定义了IOC容器的最基本功能,提供了容器应该具有的功能规范,所有的容器都应该实现这个接口 BeanFactory设计了getBean方法用来获取容器中的Bean ...
- 1751: n个素数构成等差数列
#include <stdio.h>int fill(char *map,int *primes) { for (int i = 2; i < 1001; i++) { map[i] ...
- LoadRunner随机数
需求:自定义随机数 方法: int randomnumber; randomnumber = rand()%+; //100到300的随机数 lr_output_message("ca:%d ...