将新行放在jQuery数据表的特定位置
默认
我创建了一个ajax datatable ，这些行有时在表的末尾由json填充： jsfiddle ，有时在表的顶部。 这取决于ajax响应的时间。
推荐的输出
我有来自两个不同来源的两个输入jsons，输出是这个表：
1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 8 7 6 8 7 6 8 7 6 8 7 6 1 2 3 1 2 3 1 2 3
来自2. json的行插入表（从1.json创建）到特定位置。 这个位置是常数，长度为1和2. json数据是常数。
第一个解决方案
我必须添加包含数字的第一列，并按顺序对数据表进行排序 – jsfiddle 。 我可以隐藏第一列jsfiddle ，但我更喜欢使用自定义函数，因为它在IE8中不起作用。
var t = $("#tab1").DataTable({ "ajax": "data1.json", columnDefs: [ { className: "hide", "targets": [ 0 ] }, ], "columns": [ { "data": "id"}, { "data": "cat1"}, { "data": "cat2"}, { "data": "cat3"} ] }); $.ajax({ type: "GET", url: "data2.json", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { t.rows.add(response.data); t.draw(); } });
想法 – 定制function
我尝试创建自定义函数rows.addinposition(rows, position) ，但它作为函数rows.add() 。
我复制并修改了在第7879行的 jquery.dataTables.js中找到的函数rows.add，我将out.push()更改为out.splice() splice docs 。
我知道，不推荐，更好的是扩展datatables api …
_api_register( 'rows.addinposition()', function ( rows, position ) { var newRows = this.iterator( 'table', function ( settings ) { var row, i, ien; var out = []; for ( i=0, ien=rows.length ; i<ien ; i++ ) { row = rows[i]; if ( row.nodeName && row.nodeName.toUpperCase() === 'TR' ) { //ROWS.ADD USE OUT.PUSH //out.push( _fnAddTr( settings, row )[0] ); //CHANGED TO OUT.SPLICE out.splice( position, 0, _fnAddTr( settings, row )[0] ); } else { out.splice( position, 0, _fnAddData( settings, row ) ); } } console.log(out); return out; }, 1 ); // Return an Api.rows() extended instance, so rows().nodes() etc can be used var modRows = this.rows( -1 ); modRows.pop(); modRows.push.apply( modRows, newRows.toArray() ); return modRows; } );
如果你能帮助我会很棒。
我发现了类似的问题：
- SO链接 ：版本1.9数据表中的函数
fnAddData() - SO链接 – 将多行添加到数据表的末尾
- SO链接 – 没有答案
- datatables论坛链接 – 旧版本，没有答案（我认为）
编辑
谢谢davidkonrad，但我在jsfiddle中测试它，我发现了2个问题：
- 订购是错误的，1。，而不是1.，2。 – 我认为容易出问题
- 有时这些添加的行位于表格的顶部，有时位于正确的位置。 随机。 – 也许是个大问题
我在jsfiddle中调试它，它的行为很奇怪：
console.log('rowCount = '+rowCount);
如果行在顶部（坏位置）返回：
rowCount = 0 rowCount = 1
并且for没有循环，因为firebug没有显示var i 。
如果他们处于有利位置 ，请返回：
rowCount = 5 rowCount = 6
for本例中返回的循环和var i ：
循环：
i = 5 i = 4 i = 3
2.loop：
i = 6 i = 5 i = 4 i = 3
我错过了什么吗？ 为什么订单很奇怪？
解
我相信当两个Ajax调用都成功时，你需要使用jQuery $.when函数来执行回调。
这样，您始终以相同的顺序获取数据，并且无需编写函数来在特定位置插入数据。
此外，如果需要，您可以在使用它初始化数据表之前操作最终数据。 例如，下面显示的只是两个选项，可能性是无限的。
要将call2中的数据附加到call2中的数据：
var data = a1[0].data.concat(a2[0].data);
要从来自call1 （ 源 ） 的数据位置2的call2插入数据 ：
var data = a1[0].data; data.splice.apply(data, [2, 0].concat(a2[0].data));
DEMO
有关代码和演示，请参阅下面的示例
$(document).ready(function(){ var call1 = $.ajax({ url: "https://api.myjson.com/bins/48g56", type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", }); var call2 = $.ajax({ url: "https://api.myjson.com/bins/1bfa2", type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", }); // When both Ajax requests were successful $.when(call1, call2).done(function(a1, a2){ // a1 and a2 are arguments resolved for the call1 and call2 ajax requests, respectively. // Each argument is an array with the following structure: [ data, statusText, jqXHR ] // Append data from call2 to data from call1 // var data = a1[0].data.concat(a2[0].data); // Insert data from call2 at position 2 of data from call1 var data = a1[0].data; data.splice.apply(data, [2, 0].concat(a2[0].data)); // Initialize data table var t = $("#tab1").DataTable({ data: data, columnDefs: [ { className: "hide", "targets": [ 0 ] }, ], order: [], ordering: false, columns: [ { "data": "id"}, { "data": "cat1"}, { "data": "cat2"}, { "data": "cat3"} ] }); }); });
id cat1 cat2 cat3
您不需要直接修改源代码，而是使用dataTable.Api.register ：
jQuery.fn.dataTable.Api.register('row.addByPos()', function(data, index) { var currentPage = this.page(); //insert the row this.row.add(data); //move added row to desired index var rowCount = this.data().length-1, insertedRow = this.row(rowCount).data(), tempRow; for (var i=rowCount;i>=index;i--) { tempRow = this.row(i-1).data(); this.row(i).data(tempRow); this.row(i-1).data(insertedRow); } //refresh the current page this.page(currentPage).draw(false); });
上面的函数（或插件）插入行，然后只需通过交换内容“移动”行到其所需位置 – > 阅读更详细的说明 。
演示 – > http://jsfiddle.net/p4wcfzfe/
由于插件向常规API添加了一个函数，因此应该在使用该函数初始化任何dataTable 之前声明插件。
{ plugin declaration } var table = $("#example").DataTable(); table.row.addByPos([data], 1);
注意：您的“第一个解决方案”也应该在IE8中工作，尝试删除尾随逗号。