Question posted in
You can find the official documentation here.

DataTables won't create new row for buttons – Jquery ajax

I’m trying to achieve this: https://datatables.net/extensions/buttons/examples/initialisation/multiple.html

And whenever I run this code it tells me that “table is not defined”…

<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>

I made sure I had all the scripts loaded but the only row that appears is the top row and not the new one that is supposed to appear on the bottom. I’m hoping someone can point out a quick error I made. I’ve been staring at this for a while so I wouldn’t be surprised if it was something small.

Tags:

2

Answers


  1. 0

    change this line

    table.buttons( 1, null ).container().appendTo(
        table.table().container()
    );

    to

    dt.buttons( 1, null ).container().appendTo(
        dt.table().container()
    );```
    Login or Signup to reply.
  2. 0

    if it’s giving table is undefined then, I have noticed one that you had created and store data table into dt variable and you are accessing table variable

    1) table.buttons

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

    So replace your table variable with dt at all the place in your code.

    updated

    1) dt.buttons

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

    let me know if you still facing the issues.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search