数据表结合了详细信息和行重新排序答案

【问题标题】：DataTables combine detailed information and row reorder数据表结合了详细信息和行重新排序
【发布时间】：2017-12-05 19:29:47
【问题描述】：

我正在尝试使用数据表组合详细信息和行重新排序来源是： https://datatables.net/examples/api/row_details.html 和： https://datatables.net/extensions/rowreorder/

虽然细节部分有效，但我可以拖动行但不会重新排序。

我的代码：

function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>Full name:</td>'+
        '<td>'+d.name+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Salary:</td>'+
        '<td>'+d.salary+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extra info:</td>'+
        '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
'</table>';
}

$(document).ready(function() {
var table = $('#example').DataTable( {
"rowReorder": true,

 "columns": [
        { "data": "seq" },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "start date" },
        { "data": "salary" },
        {
            "className":      'details-control',

        }
    ],  
 "columnDefs": [
 { targets: 0, visible: false },     
            ]   
} );

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );     
} );

我的html：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Seq.</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Seq.</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>2</td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td></td>
        </tr>
        <tr>
            <td>22</td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
            <td></td>
        </tr>
        <tr>
            <td>41</td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
            <td></td>
        </tr>
        </tbody>
</table>

知道为什么重新排序失败了吗？我还加载了必要的 java 脚本。

【问题讨论】：

标签： jquery datatables

【解决方案1】：

显然它不起作用，因为当您的数据源是 HTML 时，您使用了 columns.data 选项。只有当您的数据源是 JavaScript 数组或通过 Ajax 请求提供时，才需要使用此选项。

有关代码和演示，请参阅updated example。

【讨论】：