默认
我创建了 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>

将 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 - 自定义函数
我尝试创建自定义函数 rows.addinposition(rows, position)，但它作为函数 rows.add() 使用。
我复制并修改了位于 line 7879 的 jquery.dataTables.js 中的函数 rows.add ，我将 out.push() 更改为 out.splice() splice docs .

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

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

• 顺序是错误的 2.,1.，而不是 1.,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.循环:

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

我错过了什么吗？为什么顺序很奇怪？

最佳答案

不需要直接修改源码，使用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);
});

上面的函数(或插件)插入行，然后简单地通过交换内容将行“移动”到它想要的位置 -> read more detailed explanation .
演示 -> http://jsfiddle.net/p4wcfzfe/

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

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

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

关于javascript - 将新行放在 jQuery 数据表的特定位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31671570/