Question

var clientTable = $("#table").DataTable();
clientTable.row.add([1,1,1,1]).draw(false);

我使用此代码在我的数据表中添加新行，但我需要在表的第一个位置添加行。

我该怎么做？

Answer 1

根据documentation“添加的行受制于应用于表的排序和搜索条件，这将确定表中新行的位置和可见性” - 所以，新的行在表中的位置取决于数据。如果对表应用排序顺序，则可以先添加新行 - 具体取决于数据。如果您没有适合该列的列，则可以添加带有计数器的隐藏列并按其排序（例如，请参阅下面的代码段）。

或者，您可以考虑使用RowReorder扩展程序

$(document).ready(function() {
    var t = $('#example').dataTable( {
  'columns': [
    {'title': 'id', 'visible': false},
    {'title': 'data'}
  ],
  'order' : [[1,'desc']]
  } );
    var counter = 1;
 
    $('#addRow').on( 'click', function () {
        t.api().row.add( [
            counter,
            'data for id: ' + counter
        ] ).draw( false );
 
        counter++;
    } );
 
    // Automatically add a first row of data
    $('#addRow').click();
} );

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
</head>

<button id="addRow">Add New Row</button>

<table id="example" class="display" width="100%" cellspacing="0" />
    
</html>

Answer 2

准确地说，无法使用DataTable默认功能。

使用jQuery来完成

$('#tableName tr:first').after("<tr role="row"><td></td><td>Your Row</td></tr>");

jQuery DataTable添加第一行的位置

2 个答案: