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

Question

我创建的DEFAULTajax 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().
我复制和修改功能rows.add发现jquery.dataTables.js在线路7879,我改变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;
} );    

如果你能帮助我会很棒.

我发现了类似的问题:

• SO链接:fnAddData()版本1.9数据表中的功能
• SO链接 - 将多行添加到数据表的末尾
• SO链接 - 没有答案
• datatables论坛链接 - 旧版本,没有答案(我认为)

编辑
谢谢你davidkonrad,但我在jsfiddle测试它,我发现了2个问题:

• 订购是错误的,1.,而不是1.,2. - 我认为容易出问题
• 有时这些添加的行位于表格的顶部,有时位于正确的位置.随机. - 也许是个大问题

我在jsfiddle中调试它,它的行为很奇怪:

console.log('rowCount = '+rowCount);

如果行位于顶部(坏位置)返回:

rowCount = 0
rowCount = 1

并for没有循环,因为萤火虫没有显示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

我错过了什么吗？为什么订单很奇怪？

Answer 1

您不需要直接修改源代码，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中工作，请尝试删除结尾的逗号。

Answer 2

解决方案

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

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

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

将来自 的数据附加call2到 来自 的数据call1：

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

call22call1要从( source )的数据位置插入数据：

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

演示版

请参阅下面的示例以获取代码和演示。

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

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