Geek Answers Handbook

Add jQuery datatables footer via javascript without using HTML

I define my jquery datatables without HTML except for the base table element. This is my HTML:

<table id="mytable"></table>

Then I do the whole table configuration using the datatables definition. Code example:

 var dataSet = [ {name: "storage101", size: 492}, {name: "storage102", size: 742}, {name: "storage103", size: 423} ] $.extend($.fn.dataTable.defaults, { sDom: '<"top"i>rCt<"bottom"flp><"clear">' }); $("#storages").dataTable({ data: dataSet, aoColumns: [ {title: "Name", mData: "name"}, {title: "Size", mData: "size"} ], oLanguage: {sEmptyTable: "No logs"}, fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) { var api = this.api(); var size = 0; aaData.forEach(function(x) { size += (x['size']); }); // I need a footer in my table before doing this, what is the smartest way to add the footer? $(api.column(1).footer()).html( size ); } });

Now I would like to use the footer callback to display the sums of my dataset inside the footer.

Unfortunately, adding HTML to the footer (as in this example: https://datatables.net/examples/advanced_init/footer_callback.html ) does not work, since the table does not contain any tfoot element and the required rows and columns. What would be a clean way to add a footer for all my columns?

JSFiddle with code above: http://jsfiddle.net/36twp251/1/

+5
source share
3 answers

Like the other answers, I need to somehow define the footer. Not perfect, but at least I can keep my HTML clean (just defining the table and its identifier, but nothing more):

 // globally defined table to be reused in several views $.fn.storageTable = function() { $(this).append("<tfoot><tr><td></td><td></td></tr></tfoot>") return this.dataTable({ data: dataSet, aoColumns: [ {title: "Name", mData: "name"}, {title: "Size", mData: "size"} ], oLanguage: {sEmptyTable: "No logs"}, fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) { var api = this.api(); var size = 0; aaData.forEach(function(x) { size += (x['size']); }); $(api.column(1).footer()).html(size); } }); } // sample usage $("table-storages").storageTable();

JSFiddle: http://jsfiddle.net/ifischer/Ljwgrkq0/3/

0
source

CAUSE

It is not possible to control the footer without the presence of the <tfoot> element.

SOLUTION No. 1

Add the appropriate markup as described in the DataTables installation .

SOLUTION # 2

If you don’t have access to HTML, see alternative solutions below.

  • Using dom

    You can use dom to create <div class="footer"></div> and add content there, for example:

     $("#storages").dataTable({ dom: '<"top"i>rCt<"footer"><"bottom"flp><"clear">', columns: [ {title: "Name", data: "name"}, {title: "Size", data: "size"} ], fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) { var api = this.api(); var size = 0; aaData.forEach(function(x) { size += (x['size']); }); $('.footer').html(size); } });

    See this jsFiddle for a demo.

  • Adding <tfoot>

    You can add a <tfoot> element with JavaScript before by initializing DataTables, then your source code will work without problems.

    However, you need to insert the correct number of <th></th> elements for each table.

     $("#storages").append('<tfoot><tr><th></th><th></th></tr></tfoot>');

    See this jsFiddle for a demo.

+9
source

One way to do this is to: ndash; although I can’t say that this is the “smartest”:

 fnFooterCallback: function (nRow, aaData, iStart, iEnd, aiDisplay) { // getting a reference to the <table> itself (as a jQuery object): var table = this; var api = table.api(); var size = 0; aaData.forEach(function (x) { size += (x['size']); }); // finding the number of cells in the row with the largest // number of cells (for later use as a colspan attribute, // assuming that you want only one cell in the <tr> of the // footer). // first finding all <tr> elements within the <table>, // using get() to convert that collection to an array: var maxColumnLength = table.find('tr').get() // using Array.prototype.reduce() to compare // the length (size) of each row cells collection: .reduce(function (a, b) { // keeping the current <tr> (a) if its cells.length // is larger than the currently-assessed <tr> (b): return a.cells.length > b.cells.length; // finding the number of cells contained in the // <tr> that has the largest collection of cells: }).cells.length; // setting the tfoot variable to *either* the current // <tfoot> element (if one might exist from being // previously created), or creating // a <tfoot> if one does not already exist: var tfoot = this.find('tfoot').length ? this.find('tfoot') : $('<tfoot>', { // setting the innerHTML of the created-<tfoot>: 'html': '<tr><td class="result" colspan="' + size + '"></td></tr>' // inserting it before the first <tbody> element: }).insertBefore($(this).find('tbody')); // finding the <td> element with the class of 'result' // (obviously adjust to taste), and setting its text: tfoot.find('td.result').text(size); }

JS Fiddle demo .

Literature:

+1
source

More articles:


All Articles