Как поместить заголовок и заголовок нижнего колонтитула в jQuery datatables?

Question

Я использую таблицы данных jQuery в приложении asv mvc и хочу поместить заголовки , как показано ниже.

Примечание: заголовки были нанесены с использованием краски: -)

Вот мой код:

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

Спасибо

Answer 1

Вы можете использовать информационную функцию для ввода имени вашей таблицы следующим образом:

Сконфигурируйте dataTables с помощью "bInfo" = true, "sDom" создаст ваш класс css "Заголовок" и позициюВаша информация («i» после «header») и «oLanguage» будут определять, какой текст вы хотите получить в информации.Вам просто нужно стилизовать ваш класс "header" в вашем CSS как заголовок таблицы, и все будет хорошо.

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

Для "Итоговых данных" в конце, это общая сумма вычисления или общее число строки

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