How to put a header title and a footer title to jQuery datatables?

I am using jQuery datatables in a asp mvc application, and I want to put titles as shown below.

Note: the titles were put using paint :-)

Here is my code:

    <script type="text/javascript">

    var vouchers;

    $(document)开发者_开发问答.ready(function() {

        /* Init the table*/
        $("#vouchers").dataTable({
            "bRetrieve": true,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": true,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true },
            { "bSortable": true}]
        });

        vouchers.fnDraw();
    });
</script>

Thank You

You can use the info feature to put the name of your table like this :

Configure dataTables with "bInfo" = true, "sDom" will create your css class "Header" and position your info(the "i" after "header") and "oLanguage" will define what's the text you want in info. You just need to style your "header" class in your CSS like your table header and everything will be fine.

$(document).ready(function() {
    $("#vouchers %>").dataTable({
            "binfo": true,
            "sDom": '<"header"i>t<"Footer">',
            "oLanguage": {
                "sInfo": "Charges list"
            }
        });
    });  

For the "Totals" at the end, is it calculation total or a total row number?

Check this link: http://www.datatables.net/examples/advanced_init/dom_toolbar.html

Which should relate to your code like so:

$(document).ready(function() {
    $("#vouchers").dataTable({
        "sDom": '<"header">frtip<"footer">',
        "bRetrieve": true,
        "bFilter": false,
        "bSortClasses": false,
        "bLengthChange": false,
        "bPaginate": true,
        "bInfo": false,
        "bJQueryUI": true,
        "bAutoWidth": true,
        "aaSorting": [[2, "desc"]],
        "aoColumns": [
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true },
        { "bSortable": true}]
    });
    $("div.header").html('Charges list');
    $("div.footer").html('Total');
});