Question

我正在尝试使用数据表组合详细信息和行重新排序消息来源是： 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脚本。

Answer 1

显然它没有用，因为当您的数据源是HTML时，您使用了ggplot(diamonds[which(diamonds$cut %in% c("Fair", "Good")), ], aes(as.factor(color), carat, fill = cut)) + geom_split_violin(draw_quantiles = c(0.25, 0.5, 0.75))选项。仅当您的数据源是JavaScript数组或通过Ajax请求提供时，才需要使用此选项。

请参阅updated example以获取代码和演示。

DataTables结合了详细信息和行重新排序

1 个答案: