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

Question

默认
我创建 ajax datatable，这些行有时在 table 的末尾由 json 填充：jsfiddle，有时在 table 的顶部。这取决于 ajax 回复的时间。

推荐输出
我有两个来自两个不同来源的输入 jsons，输出是 table:

<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 的行被插入到 table（从 1.json 创建）到特定位置。这个位置是不变的，1.和2的长度。json数据是不变的。

第一个解
我必须添加包含数字的第一列并对数据 table 进行降序排序 - jsfiddle. I can hide first column 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();
    }
  });

想法 - 自定义函数
我尝试创建自定义函数 rows.addinposition(rows, position)，但它作为函数 rows.add().
我复制并修改了 line 7879, I changed out.push() to out.splice() splice docs 的 jquery.dataTables.js 中的函数 rows.add。

我知道，不推荐，最好是扩展数据tables 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 link: 函数 fnAddData() 版本 1.9 Datatables
SO link - 将多行添加到数据末尾table
SO link - 没有答案
datatables forum link - 旧版本，没有答案（我认为）

编辑
谢谢 davidkonrad，但我在 jsfiddle 中对其进行了测试，发现了 2 个问题：

顺序错误 2.,1.，而不是 1.,2. - 我认为简单的问题
有时这些添加的行在 table 的顶部，有时在正确的位置。随机的。 - 可能是个大问题

我在jsfiddle中调试它，它的行为很奇怪：

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

如果行在顶部（错误位置） return:

rowCount = 0
rowCount = 1

和for没有循环，因为firebug没有显示var i。

如果位置好,return:

rowCount = 5
rowCount = 6

和 for 循环并 var i return 在这个例子中：
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);
});

上面的函数（或插件）插入行，然后 "moves" 只需交换内容 -> .
即可将行插入到所需位置演示 -> http://jsfiddle.net/p4wcfzfe/

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

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

注意：您的 "first solution" 应该也适用于 IE8，请尝试删除结尾的逗号。

Answer 2

SOLUTION

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

这样你得到数据总是以相同的顺序并且不需要编写函数来在特定位置插入数据。

此外，如果需要，您可以在使用它初始化数据 table 之前操作最终数据。例如下图只是两个选项，可能性是无限的。

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

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

要在 call1 (source) 的数据的 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"}
         ]
      });
   });
});

<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>

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

Put new rows at the specific position of the jQuery datatable

javascript

jquery

datatables