1 Endpoint Do 5 Things for HTMX DataTable
Tags: webdev, php, htmx, devjournal
Published: 2024-03-22 12:38:30

Aaaaaaaaaaaaaaahhh... (sorry, I just wake up!). Hey! What's goin punk! Did you still playing the hates song while you writing code? Btw, get some coffee and sit down please. Let's talk about what I've done this week! This is soooooooooo wonderful!

I just did [TursoSyncd](https://github.com/darkterminal/turso-syncd) and doing freestyle with my `fck` PHP Framework and HTMX. Yes! HTMX with X, I've done writing my own DataTables (like) using PHP + HTMX + MySQL.

Building table and especially a DataTable is insanely annoying for me and myself! But I love doing some boring stuff and take more time to mess up and walk in to the dead zone (to looking myself as a Handsome and stupid person in the earth).

**Is that interactive? Like React Table by TanStack?**

_Yes, but not a fully features like TanStack have. This is my personal preferences. So hate me please..._

**So what kinda stuff you have?**

_Hold on, hold on... lemmee show you..._

![The HTMX DataTable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu4wylybkzttsv4itmlv.png)

```php
<!-- Filename: fck-htmx/views/components/dashboard/partials/customers.approval/table.php -->
<div class="overflow-x-auto" id="customers-table">
    <div class="flex absolute justify-center items-center -mt-2 -ml-2 w-full h-full rounded-lg bg-zinc-400 bg-opacity-35 -z-10 htmx-indicator" id="table-indicator"><?= Icons::use('HxIndicator', 'w-24 h-24') ?></div>
    <div class="flex flex-row justify-between mb-3">
        <h2 class="card-title">Customer Approval</h2>
        <input
            type="search"
            name="search"
            placeholder="Search here..."
            id="search"
            value="<?= $customers['search'] ?>"
            class="w-80 input input-sm input-bordered focus:outline-none"
            hx-get="<?= base_url('customers?' . http_build_query(array_merge($currentPage, ['column' => 'customers.customerId']))) ?>"
            hx-trigger="input changed delay:500ms, search"
            hx-swap="outerHTML"
            hx-target="#customers-table"
            hx-indicator="#table-indicator"
            autocomplete="off"
        />
    </div>
    <table class="table table-zebra">
        <thead>
            <tr>
                <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerId', $customers['activeColumn'], 'customers-table') ?>>#</th>
                <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerName', $customers['activeColumn'], 'customers-table') ?>>Customer Name</th>
                <th <?= buildHxAttributes('customers', $customers['queryString'], 'profiles.firstName', $customers['activeColumn'], 'customers-table') ?>>Marketing Executive</th>
                <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerStoreName', $customers['activeColumn'], 'customers-table') ?>>Store Name</th>
                <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerAddress', $customers['activeColumn'], 'customers-table') ?>>Address</th>
                <th class="cursor-not-allowed">Status</th>
                <th class="cursor-not-allowed">Distance</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($customers['data'] as $customer) : ?>
                <tr>
                    <th>C#<?= $customer->customerId ?></th>
                    <td><?= $customer->customerName ?></td>
                    <td><?= $customer->firstName . ' ' . $customer->lastName ?></td>
                    <td><?= $customer->customerStoreName ?></td>
                    <td><?= $customer->customerAddress ?></td>
                    <td><?= $customer->isActived ? 'Active' : 'Inactive' ?></td>
                    <td>
                        <?php
                        $customerSource = explode(',', $customer->customerCoordinate);
                        $appSource = explode(',', '-7.7682121,110.4083341');
                        echo round(Utils::haversine(
                            [
                                'lat' => $customerSource[0],
                                'long' => $customerSource[1],
                            ],
                            [
                                'lat' => $appSource[0],
                                'long' => $appSource[1],
                            ]
                        )) . " Km";
                        ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    <div class="flex flex-row justify-between mt-3">
        <p>
            Page <span class="font-bold"><?= $customers['currentPage'] ?></span> from <span class="font-bold"><?= $customers['totalPages'] ?></span> Total <span class="font-bold"><?= $customers['totalRows'] ?></span> |
            Jump to: <input type="number" name="pageNumber" id="pageNumber" hx-on:change="var url = '<?= base_url('customers?' . http_build_query(array_merge($prevPage, ['column' => 'customers.customerId', 'search' => '']))) ?>';
                var replacedUrl = url.replace(/page=\d+/, 'page=' + this.value);
                htmx.ajax('GET', replacedUrl, {target: '#customers-table', swap: 'outerHTML'})" class="w-12 input input-sm input-bordered" min="1" max="<?= $customers['totalPages'] ?>" value="<?= $customers['currentPage'] ?>" hx-indicator="#table-indicator" />
            Display: <select
                class="w-48 select select-bordered select-sm"
                hx-indicator="#table-indicator"
                hx-on:change="var url = '<?= base_url('customers?' . http_build_query(array_merge($prevPage, ['column' => 'customers.customerId']))) ?>'
                    var pageNumber = parseInt('<?= $prevPage['page'] ?>') == 0 ? 1 : parseInt('<?= $prevPage['page'] ?>')
                    var replacedUrl = url.replace(/limit=\d+/, 'limit=' + this.value);
                    htmx.ajax('GET', replacedUrl.replace(/page=\d+/, 'page=' + pageNumber), {target: '#customers-table', swap: 'outerHTML'})
                ">
                <option <?= $customers['limit'] == 10 ? 'selected' : '' ?> value="10">10 Rows</option>
                <option <?= $customers['limit'] == 20 ? 'selected' : '' ?> value="20">20 Rows</option>
                <option <?= $customers['limit'] == 30 ? 'selected' : '' ?> value="30">30 Rows</option>
                <option <?= $customers['limit'] == 40 ? 'selected' : '' ?> value="40">40 Rows</option>
                <option <?= $customers['limit'] == 50 ? 'selected' : '' ?> value="50">50 Rows</option>
            </select>
        </p>
        <div class="join">
            <button class="join-item btn btn-sm" <?= hxPagination('customers', http_build_query(array_merge($prevPage, ['column' => 'customers.customerId'])), 'customers-table') ?> <?= ($customers['currentPage'] <= 1) ? 'disabled' : '' ?>>«</button>
            <button class="join-item btn btn-sm">Page <?= $customers['currentPage'] ?></button>
            <button class="join-item btn btn-sm" <?= hxPagination('customers', http_build_query(array_merge($nextPage, ['column' => 'customers.customerId'])), 'customers-table') ?> <?= $customers['currentPage'] >= $customers['totalPages'] ? 'disabled' : '' ?>>»</button>
        </div>
    </div>
</div>
```

**😲 The f is that?!! Are you kidding me??!**

🤣 _No... but I mean yes! But... That's only the HTML Stucture with HTMX stuff and PHP Code. I will break down it to you. Please give me more loud volume for your hated song..._

## Markup #1: The Search Field

![The Search Field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctgyvknngqbz9jntoxuy.png)

```php
<input
    type="search"
    name="search"
    placeholder="Search here..."
    id="search"
    value="<?= $customers['search'] ?>"
    class="w-80 input input-sm input-bordered focus:outline-none"
    hx-get="<?= base_url('customers?' . http_build_query(array_merge($currentPage, ['column' => 'customers.customerId']))) ?>"
    hx-trigger="input changed delay:500ms, search"
    hx-swap="outerHTML"
    hx-target="#customers-table"
    hx-indicator="#table-indicator"
    autocomplete="off"
/>
```
What you see? Yes, the f `hx-` attribute!

- `hx-get` to issues a `GET` to the specified URL
- `hx-swap` to controls how content will swap in (`outerHTML`, `beforeend`, `afterend`, …)
- `hx-target` to specifies the target element to be swapped
- `hx-indicator` the element to put the `htmx-request` class on during the request

Read: [HTMX Reference](https://htmx.org/reference/)

That's the spirit of this freestyle in my messy code! Is this interesting? Just said "yessssss...." for me!

## Markup #2: The `th` Section

```php
<tr>
    <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerId', $customers['activeColumn'], 'customers-table') ?>>#</th>
    <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerName', $customers['activeColumn'], 'customers-table') ?>>Customer Name</th>
    <th <?= buildHxAttributes('customers', $customers['queryString'], 'profiles.firstName', $customers['activeColumn'], 'customers-table') ?>>Marketing Executive</th>
    <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerStoreName', $customers['activeColumn'], 'customers-table') ?>>Store Name</th>
    <th <?= buildHxAttributes('customers', $customers['queryString'], 'customers.customerAddress', $customers['activeColumn'], 'customers-table') ?>>Address</th>
    <th class="cursor-not-allowed">Status</th>
    <th class="cursor-not-allowed">Distance</th>
</tr>
```

**😕 Dude! Come on... what the punk is that `buildHxAttributes`?**

_That's PHP Function to generate `htmx` attribute that I need to sorting-order the data by column. Here is the code look like..._

```php
function buildHxAttributes($base_url, $queryString, $column, $activeColumn, $targetId, $search = '', $extraClasses = '')
{
    $hxAttributes = 'hx-get="' . base_url($base_url . '?' . $queryString . '&column=' . $column . '&search=' . $search) . '" ';
    $hxAttributes .= 'hx-swap="outerHTML" ';
    $hxAttributes .= 'hx-target="#' . $targetId . '" ';
    $hxAttributes .= 'hx-indicator="#table-indicator" ';
    $hxAttributes .= 'class="cursor-pointer ';
    if ($activeColumn === $column) {
        $hxAttributes .= 'bg-base-300 ';
    }
    $hxAttributes .= $extraClasses . '"';

    return $hxAttributes;
}
```
**😲 Ooooooooooohhh...**

_Can I..._

**😲 Yes please...**

## Markup #3: The Trampoline

![Jump to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjs0cattjpryrcsxvorj.png)

```php
Jump to: 
  <input 
     type="number"
     name="pageNumber"
     id="pageNumber"
     hx-on:change="var url = '<?= base_url('customers?' . http_build_query(array_merge($prevPage, ['column' => 'customers.customerId', 'search' => '']))) ?>';
                var replacedUrl = url.replace(/page=\d+/, 'page=' + this.value);
                htmx.ajax('GET', replacedUrl, {target: '#customers-table', swap: 'outerHTML'})"
    class="w-12 input input-sm input-bordered"
    min="1"
    max="<?= $customers['totalPages'] ?>"
    value="<?= $customers['currentPage'] ?>"
    hx-indicator="#table-indicator"
  />
```

**Did you just write PHP and JavaScript inside the attribute like this, inline?**

```php
hx-on:change="
  var url = '<?= base_url('customers?' . http_build_query(array_merge($prevPage, ['column' => 'customers.customerId', 'search' => '']))) ?>';
  var replacedUrl = url.replace(/page=\d+/, 'page=' + this.value);
  htmx.ajax('GET', replacedUrl, {target: '#customers-table', swap: 'outerHTML'})
"
```
Yes... that's call `"use client & server";`, sorry I am joking! Please give me_ 👏 👏 👏

## Markup #4: Display Limit

![Display Limit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj3d4da0x22zqcdks2by.png)

This is the select options field to allow user choose limit data that displayed in the table. Hmmmm... sound promising! 🤣

```php
Display: <select
    class="w-48 select select-bordered select-sm"
    hx-indicator="#table-indicator"
    hx-on:change="var url = '<?= base_url('customers?' . http_build_query(array_merge($prevPage, ['column' => 'customers.customerId']))) ?>'
        var pageNumber = parseInt('<?= $prevPage['page'] ?>') == 0 ? 1 : parseInt('<?= $prevPage['page'] ?>')
        var replacedUrl = url.replace(/limit=\d+/, 'limit=' + this.value);
        htmx.ajax('GET', replacedUrl.replace(/page=\d+/, 'page=' + pageNumber), {target: '#customers-table', swap: 'outerHTML'})
    ">
    <option <?= $customers['limit'] == 10 ? 'selected' : '' ?> value="10">10 Rows</option>
    <option <?= $customers['limit'] == 20 ? 'selected' : '' ?> value="20">20 Rows</option>
    <option <?= $customers['limit'] == 30 ? 'selected' : '' ?> value="30">30 Rows</option>
    <option <?= $customers['limit'] == 40 ? 'selected' : '' ?> value="40">40 Rows</option>
    <option <?= $customers['limit'] == 50 ? 'selected' : '' ?> value="50">50 Rows</option>
</select>
```

Aaaaaaaaaaand again! JavaScript code inside the attribute value 😄 this is funny right!?

## Markup #5: The Pagination

![Pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mahctisfer18ecoz5jk.png)

```php
<button class="join-item btn btn-sm" <?= hxPagination('customers', http_build_query(array_merge($prevPage, ['column' => 'customers.customerId'])), 'customers-table') ?> <?= ($customers['currentPage'] <= 1) ? 'disabled' : '' ?>>«</button>
<button class="join-item btn btn-sm">Page <?= $customers['currentPage'] ?></button>
<button class="join-item btn btn-sm" <?= hxPagination('customers', http_build_query(array_merge($nextPage, ['column' => 'customers.customerId'])), 'customers-table') ?> <?= $customers['currentPage'] >= $customers['totalPages'] ? 'disabled' : '' ?>>»</button>
```

This markup will display group buttons left display prev icon and middle the current page and next icon. Also I create a PHP Function called `hxPagination` just for fun!

```php
function hxPagination($base_url, $queryString, $targetId)
{
    $hxAttributes = 'hx-get="' . base_url($base_url . '?' . $queryString) . '" ';
    $hxAttributes .= 'hx-swap="outerHTML" ';
    $hxAttributes .= 'hx-target="#' . $targetId . '" ';
    $hxAttributes .= 'hx-indicator="#table-indicator" ';

    return $hxAttributes;
}
```
Eeeeh.... nothing fancy here! Of course... it's just markup! Wawawaiiiit... special markup with "x" 😄

---

_Everything is defined and setup (maybe) correctly! Now I need to create a **router**, **controller**, and the **model**_

## The Router

```php
<?php
// Filename: fck-htmx/routes/web.php

use Fckin\core\Application;

/** @var Application $app  */

$app->router->get('/', 'Customers@datatable');
```
Router done!

## The Controller

```php
<?php
// Filename: fck-htmx/controllers/Customers.php

namespace App\controllers;

use App\config\helpers\Utils;
use App\models\Customers as ModelsCustomers;
use Fckin\core\Controller;
use Fckin\core\Request;
use Fckin\core\Response;

class Customers extends Controller
{
    protected $customers;

    public function __construct()
    {
        $response = new Response();
        if (!isAuthenticate()) {
            $response->setStatusCode(401);
            exit();
        }
        $this->customers = new ModelsCustomers();
    }

    public function datatable(Request $request)
    {
        $customers = $this->customers->notActiveDataTables(
            $request->getQuery('column'),
            \strtoupper($request->getQuery('order')),
            $request->getQuery('page'),
            $request->getQuery('limit'),
            $request->getQuery('search')
        );
        $direction = $request->getQuery('order') === 'asc' ? 0 : 1;
        $params = [
            'customers' => [
                ...$customers,
                'search' => $request->getQuery('search'),
                'activeColumn' => $request->getQuery('column'),
                'order' => $direction,
                'page' => (int) $request->getQuery('page'),
                'limit' => (int) $request->getQuery('limit'),
                'queryString' => \http_build_query([
                    'order' => $direction === 0 ? 'desc' : 'asc',
                    'page' => $request->getQuery('page'),
                    'limit' => $request->getQuery('limit')
                ])
            ]
        ];
        return Utils::addComponent('dashboard/partials/customers.approval/table', $params);
    }
}
```
Controller is done!

## The Model

```php
<?php
// Filename: fck-htmx/models/Customers.php

namespace App\models;

use Fckin\core\db\Model;
use PDO;

class Customers extends Model
{
    public function notActiveDataTables(string $column = 'customers.customerId', string $order_by = 'ASC', int $page = 1, int $limit = 10, string $search = ''): array
    {
        $totalRows = $this->executeQuery('customers_all_is_inactive')->rowCount();

        $limit = empty($search) && ($limit === 10 || $limit === $totalRows) ? 10 : $limit;

        $offset = ($page - 1) * $limit;

        $sql = "SELECT
            customers.*,
            users.*,
            roles.*,
            profiles.*
        FROM
            customers
        JOIN users ON customers.userId = users.userId
        JOIN roles ON users.roleId = roles.roleId
        JOIN profiles ON profiles
            .userId = users.userId
        WHERE
            customers.isActived = 0 AND (
                customers.customerName LIKE '%{$search}%' OR profiles.firstName LIKE '%{$search}%' OR profiles.lastName LIKE '%{$search}%'
            )
        ORDER BY
            {$column} {$order_by}
        LIMIT {$offset}, {$limit}";
        $results = $this->query($sql);

        $totalPages = ceil($totalRows / $limit);

        return [
            'currentPage' => $page,
            'nextPage' => min($page + 1, $totalPages),
            'totalPages' => $totalPages,
            'offset' => $offset,
            'totalRows' => $totalRows,
            'data' => $results->fetchAll(PDO::FETCH_OBJ)
        ];
    }
}
```
Model is done!

---

That's it! Here the result!

{% embed https://youtu.be/MEhqJpLoZJI %}