Question

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

Answer 1

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?