默认
我创建ajax datatable，这些行有时由表格末尾的json填充：jsfiddle，有时在表格的顶部。这取决于ajax响应的时间。
推荐输出
我有来自两个不同来源的两个输入jsons，输出是这个表：
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
...
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>8</td><td>7</td><td>6</td></tr> <!-- inserted row-->
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
...
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
将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();
}
});
IDEA - CUSTOM FUNCTION
我尝试创建自定义函数rows.addinposition(rows, position)，但它的作用是函数rows.add()
我在line 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;
} );
如果你能帮助我，那就太棒了。
我发现了类似的问题：
fnAddData() 修改
谢谢davidkonrad，但是我在jsfiddle测试了它，我发现了2个问题：
我在jsfiddle中进行调试，其行为非常奇怪：
console.log('rowCount = '+rowCount);
如果行位于顶部（位置错误）则返回：
rowCount = 0
rowCount = 1
且for没有循环，因为firebug没有显示var i。
如果他们处于有利位置，请返回：
rowCount = 5
rowCount = 6
和for循环并返回var i：
1.循环：
i = 5
i = 4
i = 3
2.loop：
i = 6
i = 5
i = 4
i = 3
我错过了什么吗？为什么订单很奇怪？
答案 0 :(得分：4)
您无需直接修改源代码，而是使用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);
});
上面的函数（或插件）插入行，然后＆＃34;移动＆＃34;只需交换内容即可将行划分到所需位置 - ＆gt; read more detailed explanation。
演示 - ＆gt;的 http://jsfiddle.net/p4wcfzfe/
由于插件向常规API添加了一个函数，因此应该在使用该函数初始化任何dataTable之前声明插件。
{ plugin declaration }
var table = $("#example").DataTable();
table.row.addByPos([data], 1);
注意：你的第一个解决方案＆＃34;也应该在IE8中工作，尝试删除尾随逗号。
答案 1 :(得分：3)
<强>解
我相信当两个Ajax调用都成功时，你需要使用jQuery $.when函数来执行回调。
这样，您可以按相同顺序获取数据始终，并且无需编写函数来在特定位置插入数据。
此外，如果需要，您可以在使用它初始化数据表之前操作最终数据。例如，下面显示的只有两个选项，可能性是无限的。
将call2的数据附加到call1的数据
var data = a1[0].data.concat(a2[0].data);
要从call2 （source）数据的2位置call1插入数据：
var data = a1[0].data;
data.splice.apply(data, [2, 0].concat(a2[0].data));
<强>样本
请参阅下面的示例以获取代码和演示。
$(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"}
]
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="tab1" class='data tab01'>
<thead>
<tr>
<th>id</th>
<th>cat1</th>
<th>cat2</th>
<th>cat3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>