Vlastní vykreslení buňky v DataTables s AJAXem

JavaScript, HTML

Při použití DataTables s AJAXem se do tabulky vypisují data tak, jak přišly v odpovědi ze serveru. Naštěstí je možnost definovat vlastní renderovací funkci a vykreslit tak jakékoli HTML elementy.

Vlastní vykreslení buňky v DataTables s AJAXem

Tento článek patří do seriálu Jak na DataTables. Ostatní články seriálu:


Pokud se nepoužívá v nastavení serverSide: true, a tedy DataTables pouze pracují s daty obsaženými v tabulce, lze si do jednotlivých buněk vykreslit cokoli. Tlačítka, odkazy či datum v požadovaném formátu atd. A pokud je potřeba v těchto sloupcích vyhledávat nebo je seřazovat, lze použít data-search a data-order atributy. Více v sekci  Orthogonal data v dokumentaci.

Náhled sloupců s vlastní renderovací funkcí

Vlastní renderovací funkce

Pokud jsou ale data stahována AJAXem, může být někdy potřeba si renderování trochu upravit. Na obrázku výše lze vidět druhý sloupec, který je odkazem na detail termínu a třetí sloupec, který obsahuje možné akce s přihláškou. Jenže odpověď ze serveru vypadá podobně, jako níže.

{
  "draw": 1,
  "recordsTotal": 69,
  "recordsFiltered": 69,
  "data": [
    {
      "id": 7,
      "name": "Kutáč Pavel",
      "term_range": "23.09. - 27.09.2021 - Dopolední",
      "term_id": 11,
      "policy": { "view": true, "update": true, "absence": false }
    },
    {
      "id": 65,
      "name": "Novák Jan",
      "term_range": "13.11. - 17.11.2020 - Dopolední",
      "term_id": 17,
      "policy": { "view": true, "update": true, "absence": true }
    },
... ] }

Definovat vlastní renderovací funkci je tedy nutné jak pro druhý, tak třetí sloupec. Pomocí atributu columns se určí, jaká data z JSONu se mají vykreslit a další dodatečné nastavení. Důležitou funkcí je render, která se zavolá pro každou buňku v daném sloupci. Vracet musí přímo HTML, které je do dané buňky vloženo. Odkaz je možné vytvořit přímo ať už pomocí jQuery či čistého JS. Ale pro tlačítka akcí jsem využil možnost klonovat existující HTML element, který je následně upraven a také vložen do tabulky. Možností je samozřejmě více a jsou krásně popsány v dokumentaci.

<script>
	let termShowLink = "/terminy/__placeholder__";
    $('table[data-table]').css('width', '100%').DataTable({
        ajax: { url: "/zaci/ajaxlist" },
        processing: true,
        serverSide: true,
        columns: [
            {data: "name"},
            {data: "term_range", orderable: false, render: (data, type, row, meta) => {
                // data == value of "term_range", row == all data
                if(!row.term_id){ return data; }
                return $("<div>").append(
                    $("<a>")
                    .attr("href", termShowLink.replace("__placeholder__", row.term_id))
                    .text(data)
                ).html();
            }},
            {data: "id", orderable: false, render: (data, type, row, meta) => {
                if (!row['policy']) { return data; }
                let buttons = $(".action_buttons_template").clone();
                buttons.find('[data-can]').each((i, el) => {
                    var can = $(el).attr('data-can');
                    if (!row['policy'][can]) { $(el).remove(); }
                });
                buttons.find('a').each((i, el) => {
                    var link = $(el).attr('href').replace('__placeholder__', data);
                    $(el).attr('href', link);
                });
                return buttons.html();
            }},
        ],
    });
</script>
<div class="d-none action_buttons_template">
    <div class="btn-group" role="group">
        <a href="/zaci/__placeholder__" data-can="view" ...>...</a>
        <a href="/zaci/__placeholder__/upravit" data-can="update" ...>...</a>
        <a href="/zaci/__placeholder__/absence" data-can="absence" ...>...</a>
    </div>
</div>

Vlastní zkušenosti s DataTables můžete s ostatními čtenáři sdílet v komentářích

Přidat komentář

Položky označené * jsou povinné. Email nebude zveřejněn

Buď první, kdo přidá komentář. Zatím zde nic není