在 jQuery 数据表中的选定行之后添加一行 [英] Add a row after the selected row in jQuery dataTables

问题描述

DataTable 定义为

DataTable is defined as

var oTable = $('#table1').dataTable({
    'aaData': [
                 ['John', 'ABC', '$90000'], ['Doe', 'XYZ', '$100000'], ['Alan', 'PQR', '$110000']
              ],
    'aoColumns': [
                 {'sTitle': 'Name'}, {'sTitle': 'Company'}, {'sTitle': 'Salary'}
     ]
});

添加一个空行

oTable.fnAddData([' ', ' ', ' ']);

然而，这增加了表格的底部.有没有办法可以在所选行的正下方/上方添加.

However, this adds to the bottom of the table. Is there a way we can add exactly below / above the selected row.

推荐答案

觉得你太草率了，不能做你想做的事 :) 当然有可能，但很难弄清楚在什么情况下.这个问题不是很具体.以下代码在您单击的最后一行之后插入一个新行:

Think you are too hasty to accept that you cant do what you want :) Of course it is possible, but it is hard to figure out under which circumstances. The question is not very specific. The following code inserts a new row just after the last row you have clicked :

var dataTable;
var options = {
    bSort: false,
    bPaginate: false
};

function initDataTable() {
  dataTable = $('#example').dataTable(options);
}

function attachClickHandler() {
    $("#example tbody tr").click(function(event) {
        var index=$(this).index();
        $("#insert").text('insert a row below the row you just clicked ('+index+')').attr('index',index).show();
    });
}

$("#insert").click(function() {
    var index=$(this).attr('index');
    var newRow = '<tr>'+
        '<td>new</td>'+
        '<td>new</td>'+
        '<td>new</td>'+
        '<td>new</td>'+
        '<td>new</td>' +
        '</tr>';
    dataTable.fnDestroy();
    $("#example tbody tr").eq(index).after(newRow);    
    initDataTable();
    attachClickHandler();
});

initDataTable();
attachClickHandler();

思路是将新行插入底层DOM表，完成后重新初始化dataTable.它也通过排序工作，但为了演示目的，我关闭了排序.正如@scottysmalls 提到的，dataTables 确实在对所有内容进行排序，因此将立即对新插入的行进行排序，这看起来好像没有正确插入.

The idea is to insert the new row to the underlying DOM table, and then reinitialize dataTable when it is done. It works also by sorting, but for demonstration purposes I turn sorting off. As @scottysmalls mentions, dataTables is really sorting everything, so a new inserted row will immediately be sorted, and that would look like it was not inserted correct.

看演示 -> http://jsfiddle.net/2AqQ6/

See demo -> http://jsfiddle.net/2AqQ6/

这篇关于在 jQuery 数据表中的选定行之后添加一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！