数据表行重新排序防止某些行

Question

我有简单的数据表，我想阻止用户拖动 table 中的最后一行（在本例中为测试 6）并阻止他在第 6 行之后添加任何行。所以最后一行应该始终保留在那里。他们的 API 有这样的可能吗？或者我该怎么办？

提前致谢！

HTML:

<table class="table table-hover" id="launch_cpa_table">
<thead class="bg-info">
    <th class="text-white">Step</th>
    <th class="text-white">Name</th>
    <th class="text-white">Gate</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Test 1</td>
        <td>Test 1</td>
    </tr>
     <tr>
        <td>2</td>
        <td>Test 2</td>
        <td>Test 2</td>
    </tr>
     <tr>
        <td>3</td>
        <td>Test 3</td>
        <td>Test 3</td>
    </tr> 
     <tr>
        <td>4</td>
        <td>Test 4</td>
        <td>Test 4</td>
    </tr> 
     <tr>
        <td>5</td>
        <td>Test 5</td>
        <td>Test 5</td>
    </tr> 
    <tr style = 'background : gray'>
        <td>6</td>
        <td>Test 6</td>
        <td>Test 6</td>
    </tr> 

</tbody>

JS:

 var launch_table = $('#launch_cpa_table').DataTable( {
    rowReorder: true,
    columnDefs: [
        { orderable: true, className: 'reorder', targets: [0] },
        { orderable: false, targets: '_all' }
    ],
    paging: false
} );

FiddleJs link: https://jsfiddle.net/5r6u7z02/

Answer 1

您可以在columnDefs中使用orderable: false，这可以帮助您避免row到drag。只需将 no-sort class 添加到您的 row

columnDefs: [{
    targets: 'no-sort',
    orderable: false
  }
],

也许这不适用于任何版本，但有一个技巧解决方案，使用 pointer-events: none

JSFiddle

Answer 2

这是我的问题的答案：

https://datatables.net/forums/discussion/comment/163982#Comment_163982

数据表行重新排序防止某些行

Datatable rowReordering prevent certain row

javascript

jquery

datatables

datatables-1.10