如何将页眉标题和页脚标题放入 jQuery 数据表？答案

【问题标题】：How to put a header title and a footer title to jQuery datatables?如何将页眉标题和页脚标题放入 jQuery 数据表？
【发布时间】：2011-04-20 11:08:15
【问题描述】：

我在一个asp mvc应用程序中使用jQuery数据表，我想把titles如下图所示。

注意： 标题是用颜料画的 :-)

这是我的代码：

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

谢谢

【问题讨论】：

你能发一份你的html样本吗？
+1 用于使用绘画，但您应该徒手绘制阅读框。 ;)

标签： jquery asp.net-mvc-2 datatables

【解决方案1】：

您可以使用 info 功能将您的表的名称如下：

使用“bInfo”= true 配置 dataTables，“sDom”将创建您的 css 类“Header”并定位您的信息（“header”之后的“i”）和“oLanguage”将定义您想要在 info 中的文本是什么.您只需在 CSS 中设置“标题”类的样式，就像您的表格标题一样，一切都会好起来的。

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

最后的“Totals”是计算总数还是总行数？

【讨论】：

在我的示例中我没有对表格名称进行任何样式设置，因为我没有时间，但您应该可以轻松完成。

【解决方案2】：

查看此链接：http://www.datatables.net/examples/advanced_init/dom_toolbar.html

应该像这样与您的代码相关：

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

【讨论】：