Javascript 在jQuery数据表的特定位置放置新行

默认值
我创建了

ajaxdatatable

，这些行有时在表的末尾由json填充，有时在表的顶部。这取决于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>

IDEA-自定义功能
我尝试创建自定义函数

行。添加位置（行，位置）

，但它作为函数

行。添加（）

我复制并修改了

jquery.dataTables.js中的函数rows.add，在，我将
out.push（）
更改为
out.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;
} );    

如果行位于顶部（错误位置）返回：

rowCount = 0
rowCount = 1

而

的

没有循环，因为firebug没有显示
VARI

如果他们处于良好位置，返回：

rowCount = 5
rowCount = 6

本例中循环的
和
var i
返回的
：

1.循环：

i = 5 
i = 4 
i = 3

2.2循环：

i = 6 
i = 5 
i = 4 
i = 3

我错过什么了吗？为什么顺序奇怪？
您不需要直接修改源代码，而是使用
dataTable.Api.register
：

jQuery.fn.dataTable.Api.register（'row.addByPos（）'，函数（数据，索引）{
var currentPage=this.page（）；
//插入行
此.row.add（数据）；
//将添加的行移动到所需索引
var rowCount=this.data（）.length-1，
insertedRow=this.row（rowCount）.data（），
坦普罗；
对于（var i=rowCount；i>=index；i--）{
tempRow=this.row（i-1）.data（）；
此.row（i）.数据（tempRow）；
本.行（i-1）.数据（insertedRow）；
}     
//刷新当前页面
此.page（当前页）.draw（假）；
});

上述函数（或插件）插入行，然后通过交换内容->将行“移动”到所需位置。

演示->

由于该插件向通用API添加了一个函数，因此应该在使用该函数初始化任何数据表之前声明该插件

{ plugin declaration }
var table = $("#example").DataTable();
table.row.addByPos([data], 1);

注意：您的“第一个解决方案”也应该适用于IE8，请尝试删除尾随的逗号

解决方案

我相信当两个Ajax调用都成功时，您需要使用jQuery函数来执行回调

这样，您可以始终以相同的顺序获取数据，并且不需要编写函数来在特定位置插入数据

此外，如果需要，可以在初始化数据表之前操作最终数据。例如，下面显示的只是两个选项，可能性是无限的

将
call2
中的数据附加到
call1
中的数据：

var data = a1[0].data.concat(a2[0].data);

在
call1（）中数据的
2
位置插入
call2
中的数据：

演示

有关代码和演示，请参见下面的示例


$（文档）.ready（函数（）{
var call1=$.ajax({
url:“https://api.myjson.com/bins/48g56",
键入：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
});
var call2=$.ajax({
url:“https://api.myjson.com/bins/1bfa2",
键入：“获取”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
});
//当两个Ajax请求都成功时
$.when（call1，call2）.done（函数（a1，a2）{
//a1和a2分别是为call1和call2 ajax请求解析的参数。
//每个参数都是具有以下结构的数组：[data，statusText，jqXHR]
//将call2中的数据追加到call1中的数据
//var data=a1[0]。data.concat（a2[0]。data）；
//在call1中数据的位置2插入call2中的数据
var data=a1[0]。数据；
data.splice.apply（数据[2,0].concat（a2[0].data））；
//初始化数据表
var t=$（“#表1”）.DataTable({
数据：数据，
columnDefs：[
{className:“隐藏”，“目标”：[0]}，
], 
订单：[]，
订购：错，
栏目：[
{“数据”：“id”}，
{“数据”：“cat1”}，
{“数据”：“cat2”}，
{“数据”：“cat3”}
]
});
});
});

身份证件
第一类
第二类
第三类
@jezrael，您正试图同时插入多个新行，而函数一次只取一行（如果您看到代码，它只将一行从数组末端移动到所需位置，而不是多行）。您必须为每一行调用
addByPos
，
response.data.forEach（function（data）{t.row.addByPos（data，1）；}）
forked fiddle->或者重构
addByPos
，以获取更复杂的数据类型。不，
表。row
应该是
this.row
，sry代表键入。@jezrael，我已经做到了。谢谢你接受答案！我想我应该在第一次添加一个提琴来防止打字错误，事实上答案是在一个提琴中测试的->：（我在中测试它，我只将位置更改为3。我发现2。问题：-排序错误（2，1），而不是1，2。有时添加的行位于表的顶部，有时位于正确的位置。随机：（这是可行的，但只对行的数据有效，它忽略tr标记的属性，如class、id等。这样做的一种方法是它移动整个“节点”不只是数据？您能解释一下您想要实现什么吗？为什么需要在特定位置插入行，背后的原因是什么？我在问题中添加了建议的输出。仍然不清楚您为什么要这样做。谢谢，但排序是个问题，因为
“aaSorting”：[]
在演示中不存在。我创建它时，第一个“ordering”列丢失，而添加的行不可原谅
{ plugin declaration }
var table = $("#example").DataTable();
table.row.addByPos([data], 1);

var data = a1[0].data.concat(a2[0].data);

var data = a1[0].data;
data.splice.apply(data, [2, 0].concat(a2[0].data));