# ai-builder/2.1.6/assets/js/table-frontend.js

AI Builder – Generate pages, blocks, images & translate with AI, version 2.1.6. 134 lines.

- Page: https://pluginprobe.com/plugins/ai-builder/2.1.6/code/assets/js/table-frontend.js
- Raw: https://pluginprobe.com/plugins/ai-builder/2.1.6/raw/assets/js/table-frontend.js
- Modified: 2025-09-23T10:34:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ai-builder/2.1.6/code/assets/js/table-frontend.js#L10-L20`.

```javascript
(function () {
  function apply(tableRoot) {
    if (!tableRoot) return;
    var container =
      tableRoot.querySelector(".aibui-table-container") || tableRoot;
    var searchable = (container.getAttribute("data-searchable") || "0") === "1";
    var sortable = (container.getAttribute("data-sortable") || "0") === "1";
    var pageSize =
      parseInt(container.getAttribute("data-page-size") || "5", 10) || 5;

    var input = container.querySelector(".aibui-input");
    var table = container.querySelector("table");
    if (!table) return;
    var tbody = table.querySelector("tbody");
    var headers = [].slice.call(table.querySelectorAll("thead th"));
    var rowEls = [].slice.call(tbody.querySelectorAll("tr"));

    var state = { q: "", sortIndex: -1, sortDir: 1, page: 1 };

    function getRowValues(tr) {
      return [].slice.call(tr.children).map(function (td) {
        return (td.textContent || "").toLowerCase();
      });
    }
    var original = rowEls.map(function (tr) {
      return { el: tr, vals: getRowValues(tr) };
    });

    function render() {
      var filtered = original.filter(function (r) {
        if (!state.q) return true;
        return r.vals.some(function (v) {
          return v.indexOf(state.q) >= 0;
        });
      });
      if (sortable && state.sortIndex >= 0) {
        filtered.sort(function (a, b) {
          var av = a.vals[state.sortIndex] || "";
          var bv = b.vals[state.sortIndex] || "";
          if (av < bv) return -1 * state.sortDir;
          if (av > bv) return 1 * state.sortDir;
          return 0;
        });
      }
      var total = filtered.length;
      var pages = Math.max(1, Math.ceil(total / pageSize));
      if (state.page > pages) state.page = pages;
      var start = (state.page - 1) * pageSize,
        end = start + pageSize;
      // hide all rows first
      original.forEach(function (r) {
        r.el.style.display = "none";
      });
      // append visible rows in the correct order so sorting is reflected
      var pageRows = filtered.slice(start, end);
      var frag = document.createDocumentFragment();
      pageRows.forEach(function (r) {
        r.el.style.display = "";
        frag.appendChild(r.el);
      });
      tbody.appendChild(frag);
      var ind = container.querySelector(".aibui-page-indicator");
      if (ind) ind.textContent = state.page + " / " + pages;
      var prev = container.querySelector(
        ".aibui-table-pagination .aibui-btn:first-child"
      );
      var next = container.querySelector(
        ".aibui-table-pagination .aibui-btn:last-child"
      );
      if (prev) prev.disabled = state.page <= 1;
      if (next) next.disabled = state.page >= pages;
    }

    if (searchable && input) {
      input.addEventListener("input", function () {
        state.q = (input.value || "").toLowerCase();
        state.page = 1;
        render();
      });
    }
    if (sortable) {
      headers.forEach(function (th, idx) {
        var btn = th.querySelector(".aibui-th-btn");
        if (!btn) return;
        btn.addEventListener("click", function () {
          if (state.sortIndex === idx) {
            state.sortDir *= -1;
          } else {
            state.sortIndex = idx;
            state.sortDir = 1;
          }
          state.page = 1;
          // update header sort indicators
          headers.forEach(function (h) {
            h.removeAttribute("data-sort");
          });
          th.setAttribute("data-sort", state.sortDir === 1 ? "asc" : "desc");
          render();
        });
      });
    }
    var prev = container.querySelector(
      ".aibui-table-pagination .aibui-btn:first-child"
    );
    var next = container.querySelector(
      ".aibui-table-pagination .aibui-btn:last-child"
    );
    if (prev)
      prev.addEventListener("click", function () {
        if (state.page > 1) {
          state.page--;
          render();
        }
      });
    if (next)
      next.addEventListener("click", function () {
        state.page++;
        render();
      });

    render();
  }

  function boot() {
    var blocks = document.querySelectorAll(
      ".wp-block-ai-builder-aibui-table, .aibui-table"
    );
    for (var i = 0; i < blocks.length; i++) apply(blocks[i]);
  }
  if (document.readyState === "loading")
    document.addEventListener("DOMContentLoaded", boot);
  else boot();
})();

```