DatatableJh

A lightweight, customizable AJAX-powered datatable built with JavaScript + jQuery, featuring pagination, search, per-page limits, and action dropdowns. Designed to work smoothly with REST APIs (Laravel-friendly).

✨ Features

• AJAX data loading (GET API)
• Dynamic columns
• Server-side pagination
• Search support
• Per-page limit selector
• Action dropdown per row
• Custom column render support
• Simple reload method

📦 Installation

npm install datatable-jh

📌 Requirements

• jQuery >= 3.x
• Payload must be JSON:

{
  "page": 1,
  "per_page": 5,
  "search": ""
}

• API must return JSON in the following format:

{
  "currentPage": "1",
  "data": [],
  "totalItems": 0,
  "totalPage": 0
}

🚀 Usage

HTML Structure & ID Conventions

DatatableJh relies on strict ID-based selectors to automatically bind pagination, search, and limit controls to a table instance.

All related elements must share the same base tableId, using the following format:

<tableId>-limit
<tableId>-search
<tableId>-total-items
<tableId>-prev
<tableId>-pagination
<tableId>-next

This convention allows multiple datatables to coexist on the same page without conflicts.

Example (tableId = "users-table")

<select id="users-table-limit"></select>

<input id="users-table-search" type="text" placeholder="Search..." />

<table id="users-table">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

<p id="users-table-total-items">Showing 1 to 3 of 3 entries</p>

<button id="users-table-prev">Previous</button>

<ul id="users-table-pagination"></ul>

<button id="users-table-next">Next</button>

JS

import DatatableJh from "datatable-jh";
const userDatatable = new DatatableJh({
  tableId: "users-table",
  apiEndpoint: "/api/users",
  columns: [
    { key: "id", label: "ID" },
    { key: "name", label: "Name" },
    { key: "email", label: "Email" },
    {
      label: "Status",
      key: "status",
      render: (value) => `<span>${value}</span>`,
    },
  ],
  actions: [
    {
      label: "Edit",
      callback: (item) => (window.location.href = `/users/${item.id}/edit`),
    },
  ],
  perPageOptions: [5, 10, 25, 50],
  initPerPage: 10,
});

⚙️ Constructor Options

| Option | Type | Required | Description | | ---------------- | ------ | -------- | ---------------------- | | tableId | string | ✅ | Base ID of the table | | apiUrl | string | ✅ | API endpoint | | columns | array | ✅ | Table columns | | actions | array | ❌ | Row action buttons | | perPageOptions | array | ❌ | Limit dropdown options | | initPerPage | number | ❌ | Default items per page |

🧩 Column Definition

{
  label: "Name",
  key: "name",
  render: (value, row) => {
    return `<strong>${value}</strong>`;
  }
}

• render is optional
• Receives (value, fullRow)

🧨 Action Definition

{
  label: "Edit",
  class: "text-blue-500",
  addClass: "extra-class",
  callback: (row) => {}
}

🔄 Reload Data

userDatatable.reload();

📡 API Parameters Sent

GET /api/users?page=1&per_page=10&search=abc

🛠 Laravel Example Response

return response()->json([
    'totalItems' => $users->total(),
    'data' => $users->items(),
]);

💡 Notes

• Fully framework-agnostic (works with Laravel, Express, etc.)
• Styling uses utility classes (Tailwind-friendly)
• No external datatable dependency