table.buttons(). Is not a function

jmore

I have had a number of working pages using the following function:

buildTable()
{
  console.log("at the build table");
  if ( $.fn.DataTable.isDataTable( '#myTable' ) ) {
     console.log("table exists");
     var table = $('#myTable').dataTable({"retrieve" : true});
     //console.log(table);
     table.fnClearTable();
     //table.fnAddData(theTable.data);
     for (i = 0; i < theTable.data.length; i++)
     {
       table.fnAddData( [
         theTable.data[i].depotName,
         theTable.data[i].clientName,
         theTable.data[i].rtuName,
         theTable.data[i].deviceName,
         theTable.data[i].serialNumber,
         theTable.data[i].ipAddress,
         theTable.data[i].eventIndex,
         theTable.data[i].severity,
         theTable.data[i].training,
         theTable.data[i].eventGroup,
         theTable.data[i].groupIndex,
         theTable.data[i].location,
         theTable.data[i].eventCode,
         theTable.data[i].description,
         theTable.data[i].eventTime,
         theTable.data[i].timeStamp,
         theTable.data[i].rtuId,
         theTable.data[i].clientId,
         theTable.data[i].depotId
      ],false );
     }
     table.fnDraw();
  }
  else
  {
    console.log("table is new");
    var t = $('#myTable').DataTable( {
      buttons:
       [
          'colvis',
         {
           extend: 'collection',
           text: 'Export',
           buttons:
           [
             {
               extend: 'print',
               orientation : 'landscape',
               pageSize: 'LEGAL',
               exportOptions: {
                 columns: [ ':visible' ]
               }
             },
             {
               extend: 'copyHtml5',

               exportOptions: {
                 columns: [ ':visible' ]
               }
             },
             {
               extend: 'csvHtml5',
               exportOptions: {
                 columns: [ ':visible' ]
                }
             },
             {
               extend: 'pdfHtml5',
               orientation : 'landscape',
               exportOptions: {
                columns: [ ':visible' ]
               }
             }
           ]
         }
       ]
    });
    console.log(t);
    t.buttons().container()
     .appendTo(document.getElementById("buttonPlacement"));
    addRows(t);
  }
  $("#myTable").css("display","inline");
}

I now have a data growing very rapidly and I tried to optimize so it would handle 30K rows fairly quickly. I ended up discovering more nice features of data tables and changed the function as follows:

function buildTable() {
  console.log("at the build table");
    var t = $("#myTable").dataTable({
        "destroy": true,
        "data": theTable.data,
        "columns": [
            {"data": "depotName"},
            {"data": "clientName"},
            {"data": "rtuName"},
            {"data": "deviceName"},
            {"data": "serialNumber"},
            {"data": "deviceId"},
            {"data": "location"},
            {"data": "ipAddress"},
            {"data": "color"},
            {"data": "timestamp"},
            {"data": "meterName"},
            {"data": "meterType"},
            {"data": "value"},
            {"data": "rtuId"},
            {"data": "clientId"},
            {"data": "depotId"}
        ]
    });
    console.log(t);
    $("#myTable").css("display", "inline");
}

This function works perfectly until I add the button definitions as below:

function buildTable() {
  console.log("at the build table");
    var t = $("#myTable").dataTable({
        "destroy": true,
        buttons:
                [
            "colvis",
            {
                extend: "collection",
                text: "Export",
                buttons:
                        [
                    {
                        extend: "print",
                        orientation: "landscape",
                        pageSize: "LEGAL",
                        exportOptions: {columns: [":visible"]}
                    },
                    {
                        extend: "copyHtml5",
                        exportOptions: {columns: [":visible"]}
                    },
                    {
                        extend: "csvHtml5",
                        exportOptions: {columns: [":visible"]}
                    },
                    {
                        extend: "pdfHtml5",
                        orientation: "landscape",
                        exportOptions: {columns: [":visible"]}
                    }
                ]
            }
        ],
        "data": theTable.data,
        "columns": [
            {"data": "depotName"},
            {"data": "clientName"},
            {"data": "rtuName"},
            {"data": "deviceName"},
            {"data": "serialNumber"},
            {"data": "deviceId"},
            {"data": "location"},
            {"data": "ipAddress"},
            {"data": "color"},
            {"data": "timestamp"},
            {"data": "meterName"},
            {"data": "meterType"},
            {"data": "value"},
            {"data": "rtuId"},
            {"data": "clientId"},
            {"data": "depotId"}
        ]
    });
    console.log(t);
    t.buttons().container()
     .appendTo(document.getElementById("buttonPlacement"));
    $("#myTable").css("display", "inline");
}

I get the following error from the console :
meters.js:304 Uncaught TypeError: t.buttons is not a function
at buildTable (meters.js:304)
I have tried everything I can think of and have exhausted my attempts to correct the issue. When running under the Chrome debugger it is very easy to see that 't' is initialized as a datatable and the console.log(t) does output the table definitions; but, it fails on the reference to t.buttons() on the next line.

Any help/suggestions would be greatly appreciated.

Thanks John More

allan

Hi John,

Change:

var t = $("#myTable").dataTable({

to be:

var t = $("#myTable").DataTable({

See the top FAQ .

Allan

jmore

Thank You for the more than excellent support. Subtle but significant. I can now load 25K rows in 13 seconds as compared to minutes previously.
You have ensured I can enjoy my holidays.

allan

Awesome! Thanks for letting me know that works .

Allan