OBE-Mapping/app/static/tabel.js

/* Urutkan tabel.grid dengan klik header (naik/turun).
   Tabel di dalam <form> dilewati (baris berisi isian, urutan tak relevan);
   baris .total selalu tetap di bawah. */
(function () {
  "use strict";

  function nilaiSel(tr, i) {
    var td = tr.cells[i];
    return td ? td.textContent.trim() : "";
  }

  function sebagaiAngka(t) {
    // "76,2", "86 %", "18/49" → angka; "—"/kosong → null
    var m = t.replace(",", ".").match(/-?\d+(\.\d+)?/);
    return m ? parseFloat(m[0]) : null;
  }

  function pasang(tabel) {
    var thead = tabel.tHead;
    var tbody = tabel.tBodies[0];
    if (!thead || !tbody || thead.rows.length !== 1) return;

    Array.prototype.forEach.call(thead.rows[0].cells, function (th, i) {
      th.classList.add("bisa-urut");
      th.addEventListener("click", function () {
        var naik = th.dataset.arah !== "asc";
        Array.prototype.forEach.call(thead.rows[0].cells, function (h) {
          delete h.dataset.arah;
          h.removeAttribute("aria-sort");
        });
        th.dataset.arah = naik ? "asc" : "desc";
        th.setAttribute("aria-sort", naik ? "ascending" : "descending");

        var baris = Array.prototype.slice.call(tbody.rows);
        var biasa = baris.filter(function (tr) { return !tr.classList.contains("total"); });
        var total = baris.filter(function (tr) { return tr.classList.contains("total"); });

        biasa.sort(function (a, b) {
          var ta = nilaiSel(a, i), tb = nilaiSel(b, i);
          var na = sebagaiAngka(ta), nb = sebagaiAngka(tb);
          var hasil;
          if (na !== null && nb !== null) hasil = na - nb;
          else if (na === null && nb === null) hasil = ta.localeCompare(tb, "id");
          else hasil = na === null ? 1 : -1;   // sel kosong/— selalu di akhir
          return naik ? hasil : -hasil;
        });

        biasa.concat(total).forEach(function (tr) { tbody.appendChild(tr); });
      });
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("table.grid").forEach(function (t) {
      if (!t.closest("form")) pasang(t);
    });
  });
})();