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

我在asp mvc应用程序中使用jQuery datatables，我想将标题设置为如下所示

注：标题是用油漆写的：-）

这是我的密码：

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

var凭证；
$（文档）.ready（函数（）{
/*在桌子上*/
$（“#凭证”）.数据表({
“bRetrieve”：没错，
“bFilter”：错误，
“bSortClasses”：false，
“bLengthChange”：false，
“bPaginate”：对，
“bInfo”：假，
“bJQueryUI”：没错，
“bAutoWidth”：没错，
“aaSorting”：[[2，“desc”]，
“aoColumns”：[
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}]
});
fnDraw（）；
});

谢谢

查看此链接：

这应该与您的代码相关，如下所示：

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

$（文档）.ready（函数（）{
$（“#凭证”）.数据表({
“sDom”：“frtip”，
“bRetrieve”：没错，
“bFilter”：错误，
“bSortClasses”：false，
“bLengthChange”：false，
“bPaginate”：对，
“bInfo”：假，
“bJQueryUI”：没错，
“bAutoWidth”：没错，
“aaSorting”：[[2，“desc”]，
“aoColumns”：[
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}，
{“bSortable”：true}]
});
$（“div.header”）.html（“费用清单”）；
$（“div.footer”）.html（'Total'）；
});

您可以使用“信息”功能将表格名称如下所示：

将dataTables配置为“bInfo”=true，“sDom”将创建您的css类“Header”并定位您的信息（“Header”之后的“i”），而“olalanguage”将定义您在信息中需要的文本。您只需要在CSS中设置“header”类的样式，就像设置表头一样，一切都会很好

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

$（文档）.ready（函数（）{
$（“#凭证%>”）。数据表({
“宾福”：没错，
“sDom”：“t”，
“语言”：{
“sInfo”：“费用清单”
}
});
});  

---

对于结尾的“总计”，是计算总计还是总行号？

您可以发布一个html示例吗？+1用于使用绘画，但您应该徒手绘制阅读框。；）在我的示例中，我没有对表名进行任何样式设置，因为我没有时间，但是您应该能够轻松地进行。