默认
我创建了一个ajax数据表格，有时候行是通过json在表格末尾填充的：jsfiddle，有时候则在表格顶部。这取决于ajax响应时间。
推荐输出
我有两个来自不同来源的输入json，输出是这个表格：
<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>
从第二个json中提取的行将被插入到特定位置的表中（该表由第一个json创建）。该位置是固定的，1号和2号json数据长度是不变的。
第一种解决方案
我需要添加第一列包含一个数字，并按其降序排序datatable - 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 - 自定义函数
我尝试创建自定义函数rows.addinposition(rows, position)，但它的作用与函数rows.add()相同。
我复制并修改了在jquery.dataTables.js中找到的函数rows.add()，位于第7879行，我将out.push()更改为out.splice()splice文档。
我知道这样做不被推荐，最好是扩展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链接：Datatables 1.9版本中的函数
fnAddData() - SO链接 - 在Datatable的末尾添加多行
- SO链接 - 没有答案
- datatables论坛链接 - 旧版本，没有答案（我想）
编辑
谢谢davidkonrad，但我在jsfiddle中测试它时发现了两个问题：
- 排序错误，应为2、1而不是1、2。- 我认为这是一个简单的问题。
- 有时这些添加的行会在表格顶部，有时在正确的位置。随机出现。- 可能是个大问题。
我在jsfiddle中进行了调试，它的行为非常奇怪：
console.log('rowCount = '+rowCount);
如果行在顶部（位置不好），返回：
rowCount = 0
rowCount = 1
由于Firebug不显示var i，因此for循环没有执行。
如果它们处于良好的位置，返回：
rowCount = 5
rowCount = 6
在此示例中使用了for循环和返回var i：
1. 循环：
i = 5
i = 4
i = 3
2.loop:
i = 6
i = 5
i = 4
i = 3
我错过了什么吗？为什么顺序很奇怪？