如何添加新行到表格的最上面(困扰很久的一个问题)(转载)
- 首页
- 中文网Blog
- 正文
如何添加新行到表格的最上面(困扰了许多人的一个梗)
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
如何添加新行到表格的最上面(困扰很久的一个问题)(转载)相关推荐
- Java向pdf模板中写入数据并在模板之后添加新的表格内容
场景:我们经常会需要用代码生成pdf文件,涉及到复杂的内容也可以选用先自己制作pdf模板,再用代码去读取,动态数据部分的内容无法用模板实现的就要用Java代码去实现 需求:生成如下的pdf 实现思路: ...
- 苹果iOS 16将改进通知 添加新的健康追踪功能
4月11日消息,据国外媒体报道,代号为"Sydney"的iOS16将在6月的WWDC上推出预览版,分析师称,总体来说不会有太大的设计改变,主要将对通知和新健康追踪功能进行改进. 据 ...
- 记账工具分享,教你如何连续添加新收支
怎么记账,比如记录日常收入.支出,记账时如何连续添加新收支等等,今天小编给大家分享一个新的记账技巧,下面随小编一起来试试. 所需工具 一台电脑 操作步骤 运行[晨曦记账本],主界面简洁大方,上排是工具 ...
- Java向word表格中添加新行并赋值
前言: 相信大家都有过操作word文档表格的经历,对于每行数据的记录与操作是比较方便的.但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格 ...
- 用html向表格插入新行,js向table表格中插入添加新行和选择删除行
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...
- Android下添加新的自定义键值和按键处理流程【转】
本文转载自: Android下添加新的自定义键值和按键处理流程 说出来不怕大家笑话,我写这篇博客的原因在于前几天去一个小公司面试Android系统工程师,然后在面试的时候对方的技术总监问了我一个问题, ...
- Qt Creator添加新的自定义向导
Qt Creator添加新的自定义向导 添加新的自定义向导 向导类型 定位向导 向导开发提示 将动作映射到键盘快捷键 详细输出 将向导集成到内部版本 在向导中使用变量 本地化向导 创建向导 向导可用的 ...
- JavaScript学习笔记:动态添加与删除表格行
文章目录 一.添加表格行与单元格 二.动态删除表格行与单元格 三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
- jQuery 往table添加新内容有以下四个方法:
Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...
最新文章
- 实现带header和footer功能的RecyclerView——完善篇
- (一)Builder(建造者)模式
- Win7系统中必需记住的14个常用快捷键
- P4755-Beautiful Pair【笛卡尔树,线段树】
- c语言RTK算法,C-RTK 9P定位系统
- mysql导出txt数据_mysql导出和导入txt数据
- pyodbc mysql_pyodbc and mySQL
- Credit card dataset: SVM Classification --- PCA效果/不平衡数据
- 运动会加油稿计算机学院150字,学校运动会加油稿150字5篇
- mac mysql 没有my.cnf_mac下mysql配置my.cnf无效
- openstack compute service list报错(HTTP 503)
- android 属性动画伸缩,Android动画开发——Animation动画效果详解
- C++ 的placement new和placement delete
- 微分,不定积分,定积分的简单理解
- QT 样式表属性完整版
- Win10安装net framework 3.5失败,错误代码0x8024402c
- MySQL的upsert
- 排序二叉树的创建,插入和查找
- 神经网络 c++ 源码 可以直接复制运行,提供数据集,操作简单,最少仅需4行代码
- Java:输入单个字符
热门文章
- 做一个网站多少钱?建一个网站要多少钱?
- bulldog1——爆破、命令执行、pty提权
- 叮! Q币派送中,快来看看你中奖了吗?
- 【学习笔记】C++ GUI Qt4 第三章 3.4 实现File菜单
- C#,图论与图算法,寻找图强连通单元(Strongly Connected Components)的罗伯特·塔扬(Robert Tarjan‘s Algorithm)算法与源程序
- 子午线收敛角python代码
- Python计算生态
- UVa 243 - Theseus and the Minotaur (II)
- PDF转Word非常好的网站
- Win11远程桌面怎么用?Win11家庭版开启远程桌面