jQuery DataTable 添加行首位置答案

【问题标题】：jQuery DataTable add row first positionjQuery DataTable 添加行首位置
【发布时间】：2018-02-06 12:57:18
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

你可以看看DataTables row.add to specific index

标签： javascript jquery html datatable

【解决方案1】：

根据documentation“添加的行受应用于表的排序和搜索条件的影响，这将确定新行在表中的位置和可见性” - 所以，新行的位置表中的数据取决于数据。如果您对表应用排序顺序，则可能首先添加新行 - 取决于数据。如果您没有适合的列，您可以添加一个带有计数器的隐藏列并按其排序（例如，参见下面的 sn-p）。

或者，您可以考虑使用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>

【讨论】：

没错。您可以将有问题的行添加到第二个标题行，然后它将不受数据表排序的影响。

【解决方案2】：

实际上，DataTable 默认函数是不可能的。

用 jQuery 来做：

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

【讨论】：