Skeleton v2

Datatable

Datatable example

HTML

<table id="datatable-1" class="table display table-bordered table-striped table-condensed table-hover" style="width: 100%;"></table>

Ajánlott JS

Ezek azok a DT beállítások, amiket ajánlott elvégezni az inicializáláshoz.
Az adatokat célszerű szerver oldalon generálni, nagy adatmennyiségeknél pedig elengedhetetlen.
Ez a dom egy kiforrott, jól mutató változat, csak indokolt esetekben érdemes eltérni ettől.

$('#datatable-1').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax'      : {
        "type"       : "GET",
        "url"        : '{{ path_for('documentation_datatable_json') }}',
        "data"       : function (data) {
            // Ez a kereséshez rakja össze a szükséges bemeneti mezőket
            return {
                search            : data.search.value,
                start             : data.start,
                length            : data.length,
                order_by_column   : data.columns[ data.order[0].column ].data,
                order_by_direction: data.order[0].dir,
            };
        }
    },
    'columns'   : [
        {'data': 'id',                  'title': '#'},
        {'data': 'ticket_id',           'title': 'Hibajegy száma'},
    ]
});

A fenti táblázatot működtető JS

let datatable1 = $('#datatable-1').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax'      : {
        "type"       : "GET",
        "url"        : '{{ path_for('documentation_datatable_json') }}',
        "data"       : function (data) {

            return {
                search            : data.search.value,
                start             : data.start,
                length            : data.length,
                order_by_column   : data.columns[ data.order[0].column ].data,
                order_by_direction: data.order[0].dir,
            };
        }
    },
    "order": [[ 2, "desc" ]],
    'columns'   : [
        {'defaultContent': '-', 'data': 'id',                  'title': '#',                'className': 'min-w'},
        {'defaultContent': '-', 'data': 'ticket_id',           'title': 'Hibajegy száma'},
        {'defaultContent': '-', 'data': 'location',            'title': 'Helyszín',         'className': 'min-w',     'orderable': false},
        {'defaultContent': '-', 'data': 'source',              'title': 'Érintett',         'className': 'min-w',     'orderable': false},
        {'defaultContent': '-', 'data': 'device',              'title': 'Eszköz',           'className': 'd-none d-xl-table-cell', 'orderable': false},
        {'defaultContent': '-', 'data': 'description',         'title': 'Esemény leírása',  'className': 'd-none d-xl-table-cell', 'orderable': false},
        {'defaultContent': '-', 'data': 'start',               'title': 'Esemény kezdete',  'className': 'min-w'},
        {'defaultContent': '-', 'data': 'end',                 'title': 'Esemény vége',     'className': 'min-w'},
        {
            'orderable': false,
            'className': 'min-w text-right',
            'title'    : ' ',
            'width'    : '52px',
            render     : function (data, type, row, meta) {
                let elementID   = row.id;
                let content = '';
                    content += `
                        <a
                            style="
                                width: 24px;
                                text-align: center !important;
                            "
                            class="
                                btn
                                btn-primary
                                btn-xs
                            "
                            href="/documentation/datatable?${elementID}"
                            >
                                <i class="fa-fw fas fa-pencil-alt"></i>
                    </a>`;
                return content;
            }
        },
    ]
});