1. 首页
  2. 中文网Blog
  3. 正文

如何添加新行到表格的最上面(困扰了许多人的一个梗)

DataTables中文网  28 May 2016 复制本页地址

Tags: 博客 DataTables使用经验


这个还要从很久很久之前说起……

首先要说的是 Datatables 提供了两个 api 来添加新的行,一个是 row.add()API ,一个是rows.add()API

前者是单行添加,后者是多行添加,那么先看下面的代码,看看我们是怎么添加一行到表格中的 下面是表格初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var oTable02 = $('#inlineEditDataTable').DataTable({"columnDefs": [{'title': "Priority", 'targets': 0},{'title': "Item", 'targets': 1},{'title': "Type", 'targets': 2},{'title': "Background-color", 'targets': 3}],"order": [[0, "des"]],"columns": [{"data": "priority"},{"data": "name"},{"data": "type"},{"data": "color"}],"ajax":"json.json"
});

往表格里添加一行或者多行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//单独添加一行

var singlerow = {"id": 1,"name": "DataTables 中文网","type": 1,"color": "white","priority": 1
};
oTable02.row.add(singlerow);//同时添加多行

var rows = [{"id": 1,"name": "DataTables 中文网 api","type": 1,"color": "white","priority": 2
},
{"id": 1,"name": "DataTables 中文网 不定时一讲","type": 1,"color": "white","priority": 3
}];
oTable02.rows.add(rows);

这个时候大家遇到的问题就是,怎么都往后面追加了,要是有2页的话,不翻页还不知道这行已经添加进去了

先别急,我们先看看这个例子 添加行 API 示例 Datatables中文网

不用怀疑,如果你操作了这个例子,你心中肯定想的是,添加新行就是往后追加的

不!我一开始也是这么认为的,直到我写首页的例子后,发现有时候添加的新行居然在表格中间,我暗自笑了笑,“哈哈居然还有bug”

但是后面我发现不对,于是我开始查询资料,皇天不负有心人,终于让我知道是怎么回事了。

作者在论坛里说到

Datatables 的数据位置是由 sort 控制的,如果你希望新加入的行在表格最上面,那么你的数据排序(升序)就必须要在最上面

看到这句话的时候,我大概明白了,我马上去用代码做了实验证明自己的想法。

“实践是检验真理的唯一标准”这话一点都不假,如果光有想法不实践,只做而又不去思考都是不行的,咦?不对,我是不是跑题了? 好我们说正事,那么根据我上面说的屁话,可以知道如果要想新加入的行在表格的最上方,只要在数据上稍作处理即可。

看下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var oTable02 = $('#inlineEditDataTable').DataTable({"columnDefs": [{'title': "Priority", 'targets': 0},{'title': "Item", 'targets': 1},{'title': "Type", 'targets': 2},{'title': "Background-color", 'targets': 3}],//这里之所以写出来,是大家需要注意的,因为dt的的默认值为[[0, 'asc']]
//所以上面提到的 添加行的例子 操作的结果是在后面追加
//因为默认第一列升序排列,所以根据代码,新加的行第一列是累加的,那么越来越大,升序的话当然往后面排啊
"order": [[0, "des"]],"columns": [{"data": "priority"},{"data": "name"},{"data": "type"},{"data": "color"}],"ajax":"json.json"
});//针对这个代码示例,先假设表格中已经有一行数据【  0  中文网  1  white 】,我新加的行要在他上面,代码这样写

var singlerow = {"id": 1,"name": "我在最上面","type": 1,"color": "white","priority": 1
};
oTable02.row.add(singlerow);

这里需要注意的地方就是,我给出的代码示例设置了第一列降序排列,第一列是 priority, 那么只要新加行 priority 比已有行 priority 要大 即可。

转载:http://www.datatables.club/manual/daily/2016/05/28/how-to-add-row-to-top-of-table.html

如何添加新行到表格的最上面(困扰很久的一个问题)(转载)相关推荐

  1. Java向pdf模板中写入数据并在模板之后添加新的表格内容

    场景:我们经常会需要用代码生成pdf文件,涉及到复杂的内容也可以选用先自己制作pdf模板,再用代码去读取,动态数据部分的内容无法用模板实现的就要用Java代码去实现 需求:生成如下的pdf 实现思路: ...

  2. 苹果iOS 16将改进通知 添加新的健康追踪功能

    4月11日消息,据国外媒体报道,代号为"Sydney"的iOS16将在6月的WWDC上推出预览版,分析师称,总体来说不会有太大的设计改变,主要将对通知和新健康追踪功能进行改进. 据 ...

  3. 记账工具分享,教你如何连续添加新收支

    怎么记账,比如记录日常收入.支出,记账时如何连续添加新收支等等,今天小编给大家分享一个新的记账技巧,下面随小编一起来试试. 所需工具 一台电脑 操作步骤 运行[晨曦记账本],主界面简洁大方,上排是工具 ...

  4. Java向word表格中添加新行并赋值

    前言: 相信大家都有过操作word文档表格的经历,对于每行数据的记录与操作是比较方便的.但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格 ...

  5. 用html向表格插入新行,js向table表格中插入添加新行和选择删除行

    js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...

  6. Android下添加新的自定义键值和按键处理流程【转】

    本文转载自: Android下添加新的自定义键值和按键处理流程 说出来不怕大家笑话,我写这篇博客的原因在于前几天去一个小公司面试Android系统工程师,然后在面试的时候对方的技术总监问了我一个问题, ...

  7. Qt Creator添加新的自定义向导

    Qt Creator添加新的自定义向导 添加新的自定义向导 向导类型 定位向导 向导开发提示 将动作映射到键盘快捷键 详细输出 将向导集成到内部版本 在向导中使用变量 本地化向导 创建向导 向导可用的 ...

  8. JavaScript学习笔记:动态添加与删除表格行

    文章目录 一.添加表格行与单元格 二.动态删除表格行与单元格 三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...

  9. jQuery 往table添加新内容有以下四个方法:

    Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...

最新文章

  1. 实现带header和footer功能的RecyclerView——完善篇
  2. (一)Builder(建造者)模式
  3. Win7系统中必需记住的14个常用快捷键
  4. P4755-Beautiful Pair【笛卡尔树,线段树】
  5. c语言RTK算法,C-RTK 9P定位系统
  6. mysql导出txt数据_mysql导出和导入txt数据
  7. pyodbc mysql_pyodbc and mySQL
  8. Credit card dataset: SVM Classification --- PCA效果/不平衡数据
  9. 运动会加油稿计算机学院150字,学校运动会加油稿150字5篇
  10. mac mysql 没有my.cnf_mac下mysql配置my.cnf无效
  11. openstack compute service list报错(HTTP 503)
  12. android 属性动画伸缩,Android动画开发——Animation动画效果详解
  13. C++ 的placement new和placement delete
  14. 微分,不定积分,定积分的简单理解
  15. QT 样式表属性完整版
  16. Win10安装net framework 3.5失败,错误代码0x8024402c
  17. MySQL的upsert
  18. 排序二叉树的创建,插入和查找
  19. 神经网络 c++ 源码 可以直接复制运行,提供数据集,操作简单,最少仅需4行代码
  20. Java:输入单个字符

热门文章

  1. 做一个网站多少钱?建一个网站要多少钱?
  2. bulldog1——爆破、命令执行、pty提权
  3. 叮! Q币派送中,快来看看你中奖了吗?
  4. 【学习笔记】C++ GUI Qt4 第三章 3.4 实现File菜单
  5. C#,图论与图算法,寻找图强连通单元(Strongly Connected Components)的罗伯特·塔扬(Robert Tarjan‘s Algorithm)算法与源程序
  6. 子午线收敛角python代码
  7. Python计算生态
  8. UVa 243 - Theseus and the Minotaur (II)
  9. PDF转Word非常好的网站
  10. Win11远程桌面怎么用?Win11家庭版开启远程桌面