Wie man eine Kopfzeile und eine Fußzeile, Titel, jQuery datatables?

Ich bin mit jQuery datatables in ein asp-mvc-Anwendung, und ich möchte Titel wie unten gezeigt.

Hinweis: die Titel wurden mit paint 🙂

Wie man eine Kopfzeile und eine Fußzeile, Titel, jQuery datatables?

Hier ist mein 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>

Danke

Sie können post eine Probe Ihres html bitte?
+1 für die Verwendung von Farbe, aber Sie sollten auf sich gezogen haben, die lese-Kisten freie hand. 😉

InformationsquelleAutor Haxed | 2011-04-20

  1. 3

    Können Sie die info-Funktion setzen Sie den Namen Ihrer Tabelle wie diese :
    Wie man eine Kopfzeile und eine Fußzeile, Titel, jQuery datatables?

    Konfigurieren dataTables mit "bInfo" = true, "sDom" wird erstellen Sie Ihre css-Klasse "Header" und die position deiner info(das "i" nach "header") und "oLanguage" definieren, was Sie den gewünschten text in der info. Sie müssen nur Stil "header" class in der CSS wie Sie Ihre Tabelle, Kopf-und alles wird gut.

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

    Für die "Summen" am Ende, ist es Berechnung insgesamt Summe Zeile Nummer?

    Ich habe es nicht eine styling-der name der Tabelle in meinem Beispiel, weil ich nicht die Zeit hatte, Sie sollten aber in der Lage, leicht tun.

    InformationsquelleAutor Sylvain Perron

  2. 3

    Überprüfen Sie diesen link: http://www.datatables.net/examples/advanced_init/dom_toolbar.html

    Sollte in Beziehung zu Ihrem code etwa 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');
});

    InformationsquelleAutor Mark Pope

Schreibe einen Kommentar