开发者

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

开发者 https://www.devze.com 2023-02-27 15:21 出处:网络
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 :-)

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 :-)

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

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 :

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

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');
});
0

精彩评论

暂无评论...
验证码 换一张
取 消