时间戳

首页 > 解决方案 > DataTables 不会为按钮创建新行

javascript - DataTables 不会为按钮创建新行

问题描述

我正在努力实现这一目标：https ://datatables.net/extensions/buttons/examples/initialisation/multiple.html

每当我运行此代码时，它都会告诉我“未定义表”...

<script>
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.owner+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';

}


$(document).ready(function() {
    var dt = $('#tblVendor').DataTable( {
        "responsive": true,
        "dom": 'Bfrtip',

        "buttons":[
         { extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
         { extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
         { extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
         { extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' },

        {"className": "btn btn-info btn-fill move", "text":"New Vendor", "action":function(e, dt, node, config){window.location.replace("new.php"); }

        }],

        "processing": true,
        "serverSide": true,
        "ajax": "ajax.php",
        'serverMethod': 'post',
        "columns": [
            {
                "width": "5%",
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""

            },
            { "data": "name" },
            { "data": "company" },
            { "data": "type" },
            { "data": "status" },
            { "data": "owner", "visible": false},
            { "data": "dept" },


        ],  "order": [[1, 'asc']],


    } );

        new $.fn.dataTable.Buttons( table, {
        buttons: [
            {
                text: 'Button 2',
                action: function ( e, dt, node, conf ) {
                    alert( 'Button 2 clicked on' );
                }
            },
            {
                text: 'Button 3',
                action: function ( e, dt, node, conf ) {
                    alert( 'Button 3 clicked on' );
                }
            }
        ]
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#tblVendor'+id+' td.details-control').trigger( 'click' );
        } );
    } );

    table.buttons( 1, null ).container().appendTo(
        table.table().container()
    );
} );
</script>

我确保我已经加载了所有脚本，但唯一出现的行是顶行，而不是应该出现在底部的新行。我希望有人能指出我犯的一个快速错误。我已经盯着这个看了一段时间，所以如果它是小东西，我不会感到惊讶。

标签： javascriptjqueryajaxdatatables

解决方案

如果它给出的表是未定义的，我注意到您已经创建了一个表并将数据表存储到dt变量中，并且您正在访问表变量

1)table.buttons

2)new $.fn.dataTable.Buttons( table, {**

因此，在代码中的所有位置用 dt替换您的表变量。

更新

1)dt.buttons

2)new $.fn.dataTable.Buttons(dt,

如果您仍然面临这些问题，请告诉我。

推荐阅读