在jQuery dataTables中的所选行之后添加一行

时间:2014-03-13 18:39:35

标签: jquery datatables jquery-datatables

DataTable定义为

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

添加空行

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

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

2 个答案:

答案 0 :(得分:5)

认为你太急于接受你不能做你想做的事情:)当然有可能,但很难弄清楚在哪种情况下。问题不是很具体。以下代码在您单击的最后一行之后插入一个新行:

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实际上是对所有内容进行排序,因此新插入的行将立即被排序,看起来它没有被正确插入。

参见演示 - &gt;的 http://jsfiddle.net/2AqQ6/

答案 1 :(得分:1)

如果没有一些自定义排序功能,我不相信它是可能的。位置完全基于排序。开发人员在此处对此进行了备份:http://bit.ly/1gtYHyk和此处http://bit.ly/PxHKgM