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

问题描述

数据表定义为

  var oTable = $（'＃table1'）。dataTable（{
' aaData'：[
 ['John'，'ABC'，'$ 90000']，['Doe'，'XYZ'，'$ 100000']，['Alan'，'PQR'，'$ 110000'] 
]，
'aoColumns'：[
 {'sTitle'：'Name'}，{'sTitle'：'Company'}，{'sTitle'：'Salary'} 
] 
}）; 
  

空行添加为

  oTable.fnAddData（['& nbsp;'，'& nbsp;'，'& nbsp;']）; 
  

但是，这会添加到表的底部。有没有一种方法可以精确地添加到所选行的上方/上方。

解决方案

认为你太匆忙地接受你不能做你想要的:)当然可以的，但它是很难弄清楚在哪种情况下。这个问题不是很具体。以下代码在您点击的最后一行之后插入一个新行：

  var dataTable; 
 var options = {
 bSort：false，
 bPaginate：false 
}; 
 
函数initDataTable（）{
 dataTable = $（'＃example'）。dataTable（options）; 
} 
 
函数attachClickHandler（）{
 $（＃example tbody tr）。click（function（event）{
 var index = $（this） .index（）; 
 $（＃insert）。text（'在你刚刚点击的行下插入一行（'+ 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真的是排序所有的东西，所以一个新的插入的行将立即被排序，这看起来像没有插入正确。

> http://jsfiddle.net/2AqQ6/

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'}
     ]
});

An empty row is added as

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();

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.

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

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