在jQuery数据表格中添加新行到顶部

Question

我需要在数据表中添加一行，这行应该位于表的顶部。我已经使用了排序插件，但它失败了。

有人能帮我解决这个问题吗？

- Tony Jose

---

你可以将 row 模板存储在一个变量中。你可以获取表格 $('table').find('tr:first') 的第一行，然后使用 .prepend(rowTemplate) 方法插入模板。 - Sukanya1991

抱歉，由于它有分页，所以它无法工作，它将被添加到最后一页的顶部。 - Tony Jose

你能否制作一个演示版来展示你正在做的事情？ - Sukanya1991

是的...做了一个样本..检查这个 http://jsfiddle.net/cvLRg/41/ - Tony Jose

由于行在排序时会重新排序，因此在顶部添加行可能会很困难。您可以像这样做http://jsfiddle.net/dhirajbodicherla/cvLRg/56/（隐藏第一列）。但是如果您对某些列进行排序并添加或插入，则此方法将无效。 - Dhiraj

Answer 1

经过一段时间的尝试，我使用内置的order()函数解决了我的表格问题。(无需额外插件)

    var table = $('#adapterTable').DataTable();

    $('#newButton').on( 'click', function () {
        var row = ["<button id='savebutton'>save</button>","<input name='titel'/>"];
        table.row.add(row).draw( false );

        table.order([1, 'asc']).draw();
        table.order([0, 'asc']).draw();
    } );

这是因为我的表格在第一列中有ID，并在第二列中有文本字段。

我插入的行包含ID列中的保存按钮和第二列中的输入字段。

如果我现在按第二列升序排序，输入框将显示在顶部。为了恢复按ID排序，只需在ID列上再进行一次order()。这不知何故不会影响带有按钮的行，而只会影响数值行。

table.order([0, 'asc']).draw();

这更多是一种解决方法，取决于表格的内容。对于纯文本，您可能需要将其与一个隐藏列结合起来进行排序或使用其他技巧。但您可以使用Datatable函数，而无需直接操作表格。

- Yush0

---

嗨，我尝试了你的解决方案，但是我不知道为什么输入文本无法填写。你知道为什么吗？ - Praditha

我不确定我是否正确理解了你的问题。 你可以在具有value属性的输入框中编写文本：<input value='yourtext'> - Yush0

Answer 2

在我的情况下，表格的排序顺序是服务器返回数据数组的任何顺序。客户端不进行任何额外的排序（'ordering'设置为false）。为了在客户端将新行添加到数据数组的开头，我执行了以下操作：

• 获取原始的table.data()数据数组
• 将我的新行插入数组的开头
• 清除表格并重新添加所有行

let newdata = Array.from(table.data());
newdata.unshift(['my', 'new', 'row']);
table.clear();
for (const row of newdata) {
  table.row.add(row);
}
table.draw();

- erwaman

---

非常棒的解决方案，与我尝试过的其他方案相比性能也很好。此外，如果您有一个有序表格，并且只想暂时在顶部显示新条目，您可以使用“table.draw（false）”，这不会触发排序。 - Holger Rattenscheid

Answer 3

这个解决方法可能有所帮助：

• 通过API将行添加到datatable对象中（这样当您进行排序或分页时，就可以使用该数据）
• 不要重新绘制（因此新行不会出现在底部）
• 使用.prepend()将相同的行添加到表格顶部

var employersTable = $('#employersTable').DataTable();
$('#addRow').click(function(){
    var row = $('<tr>')
        .append('<td>added row</td>')
        .append('<td>Test 2</td>')
        .append('<td>123</td>')
        .append('<td>2014-05-09</td>')
        .append('<td>No</td>')
        .append('<td>blub</td>')

    employersTable.row.add(row);
    $('#employersTable tbody').prepend(row);
});

重要（可能）的缺点：当您添加行时，它不会自动分页。

您可以在JSFiddle上查看工作示例。

- Ángela

---

直接操作表格是个不好的解决方法，因为这会破坏排序和分页。 - Gyrocode.com

我知道，这就是为什么我称它为“变通方法”的原因。由于OP所要求的定义上是“打破排序”，我认为这可能已经足够好了。此外，由于我将行添加到数据中，在您与数据表进行下一次交互时，排序和分页将再次正常工作。 - Ángela

如果您使用此方法，基本的数据表功能将无法正常工作！ - Kiran Reddy

Answer 4

add方法将在jquery.dataTables.js中将行推入aiDisplayMaster数组。因此，您可以更改aiDisplayMaster中行的位置。以下是代码。

table = $("table").dataTable() //not DataTable() function
dt = table.api()
obj = {"id":131,"name":" 111  test"}
dt.row.add(obj);
var aiDisplayMaster = table.fnSettings()["aiDisplayMaster"];
irow = aiDisplayMaster.pop();
aiDisplayMaster.unshift(irow);
dt.draw();

- robin

Answer 5

$(document).ready(function() {
  $('#addRowBtn').on('click', function() {
    var t = $('#example').DataTable();
    var newRow = t.row.add([]).order( [ 1, 'asc' ] ).draw(false).node();
    $(newRow).prependTo('#example tbody');
  });
});

- Anjali Verma

Answer 6

$('#addRow').on('click', function () {
  var newRow = $('<tr>').append(
    $('<td>').html('<input type="text" placeholder="Employee Number" id="emp_number" name="emp_number">'),
    $('<td>').html('<input type="text" placeholder="dd" id="name" name="name">'),
    $('<td>').html('<select size="1" id="post" name="post"><option value="" selected="selected">Choose Post</option> <% for(var i=0; i<posts.length; i++) {%><option value="<%= posts[i].PostID %>"><%= posts[i].PostName %></option><% } %></select>'),
    $('<td>').html('<input type="text" placeholder="Start Time" id="start_time" name="start_time">'),
    $('<td>').html('<input type="text" placeholder="End Time" id="end_time" name="end_time">'),
    $('<td>').html('<input type="text" placeholder="Hours" id="hours" name="hours" readonly>'),
    $('<td>').html('<button>Save</button>')
  );

  var table = $('#example');
  table.find('tbody').prepend(newRow);
});

- Kry Longdy