Vlastní vykreslení buňky v DataTables s AJAXem

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

• Vlastní filtry s DataTables a AJAXem
• Vlastní vykreslení buňky v DataTables s AJAXem

---

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.

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