Backend Sorting with GET Parameters Instead of JavaScript

When building sortable lists, the temptation is to handle sorting in JavaScript—intercept clicks, reorder the DOM, maybe use a library like DataTables. But there’s a simpler, more robust approach: let the backend handle it via GET parameters.

The Backend Sorting Pattern

Instead of JavaScript, pass sorting preferences through the URL:

$allowedSorts = ['created_at', 'updated_at', 'name', 'price'];
$sort = request('sort', 'created_at');
$direction = request('direction', 'desc');

if (!in_array($sort, $allowedSorts)) {
    $sort = 'created_at';
}

$items = Item::orderBy($sort, $direction)->paginate(20);

Then in your view, generate sort links:

<select onchange="window.location.href=this.value">
    <option value="?sort=created_at&direction=desc" {{ request('sort') == 'created_at' ? 'selected' : '' }}>
        Newest First
    </option>
    <option value="?sort=name&direction=asc" {{ request('sort') == 'name' ? 'selected' : '' }}>
        Name (A-Z)
    </option>
    <option value="?sort=price&direction=asc" {{ request('sort') == 'price' ? 'selected' : '' }}>
        Price (Low to High)
    </option>
</select>

Why Backend Sorting Wins

State in the URL: Users can bookmark a sorted view, share links, and browser back/forward works correctly. With JS sorting, the URL doesn’t change—the state lives only in memory.

Works with pagination: Client-side sorting breaks when you paginate (you’re only sorting the current page). Backend sorting applies across all records.

No Vue template issues: If you’re using Vue, putting <script> tags in templates causes parsing errors. Backend sorting keeps JavaScript out of your Blade/Vue templates entirely.

RESTful and simple: The URL describes the resource state. It’s the way the web was designed to work.

Whitelist Validation is Critical

Notice the $allowedSorts array? This prevents SQL injection via column names:

if (!in_array($sort, $allowedSorts)) {
    $sort = 'created_at'; // fallback to default
}

Without this check, a malicious user could inject arbitrary SQL by crafting a URL like ?sort=malicious_column. Always validate sort columns against a whitelist.

Handling Relationships

You can even sort by related model columns using joins:

$allowedSorts = ['created_at', 'name', 'category_name'];
$sort = request('sort', 'created_at');

if ($sort === 'category_name') {
    $items = Item::join('categories', 'items.category_id', '=', 'categories.id')
        ->select('items.*')
        ->orderBy('categories.name', $direction)
        ->paginate(20);
} else {
    $items = Item::orderBy($sort, $direction)->paginate(20);
}

Preserving Other Query Parameters

If your page has filters or search, append them to sort links using request()->except():

$queryParams = request()->except('sort', 'direction');
$queryParams['sort'] = 'name';
$queryParams['direction'] = 'asc';

<a href="?{{ http_build_query($queryParams) }}">Sort by Name</a>

Or use Laravel’s appends method on paginated results:

{{ $items->appends(request()->except('page'))->links() }}

When JavaScript Sorting Makes Sense

There are still valid use cases for client-side sorting:

• Small datasets (< 100 rows) that fit on one page
• Real-time data that updates frequently via WebSocket
• Interactive tables where instant response is critical (trading dashboards, etc.)

But for most admin panels and user-facing lists, backend sorting with GET parameters is simpler, more robust, and plays nicely with pagination, bookmarking, and server-side rendering.

Let the URL do the work. It’s already there for a reason.