How do I add a static custom footer (from json data) when creating the table?

chross

Hi,
I want to add a custom footer to my table at initialization. The footer is static and all the values are precalculated by a php script and fetched by ajax before. What I'd like best is to simply throw an array at DataTables (like I do with my actual table data) to fill in two rows in the footer. However, I don't want to add any footer cells in html, everything needs to be a jQuery or DataTable function. Is there a way?

HTML
<table id="skills"><thead></thead><tfoot></tfoot></table>


JS
options = {
                "data": stats_rows,
                "columns": stats_cols,
                "bPaginate": false,
                 "info": false
                };
target = '#skills';
var table =  $(target).addClass('display').DataTable(options);

My table will correctly show without pagination and info display, but will ONLY show the header and no footer at all (I thought the footer was a standard option).

Now I need a way to add two rows of data to the footer from my array stat_footrows.

Thank you all for your help and thanks to Allan for creating this wonderful plugin. It really excels where jQgrid and tablesorter fall short.

chross

Is there a function that allows me to create a valid row from array data like

['value1','value2','value3','value4']

to

<tr><td>value1</td><td>value2</td><td>value3</td><td>value4</td></tr>

and add it to the footer or do I need to do this myself?

Rpiechura

I wrote a function that basically did that, the function takes the element that it should tie the footer to (the same one that you're going to call the datatable on) and an array of columns (as you specified). It's important to note that you have to call the function before you initialize the table otherwise it wont be hooked up automatically.

function createFooter(element, columns) {
        var footer = document.createElement('tfoot');
        var tr = document.createElement('tr');

        jQuery.each(columns, function (i, value) {
            var th = document.createElement('th');
            var input = document.createElement('input');

            input.setAttribute("type", "text");
            input.setAttribute("name", "search_" + value.replace(" ", "_"));
            input.setAttribute("placeholder", "Filter " + value);
            input.setAttribute("class", "search_init");

            th.appendChild(input);
            tr.appendChild(th);
        });

        footer.appendChild(tr);
        element.appendChild(footer);
    }

The result would be an input for each value in the array that looks something like

<th> <input type="text" name="search_value1" placeholder="Filter value1" class="search_init"></th>

Obviously you can remove all the specific attributes on the input as you see fit, I just wanted them for various reasons.