如何添加新行到表格的最上面(困扰了许多人的一个梗)
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