ColReorder

Drag-and-drop column reordering

ColReorder lets the end user reorder columns through a click-and-drag operation.

The library recognises the reordered columns and adapts the SQL accordingly.

ID	Track Name	Album	MediaType
Loading…
ID	Track Name	Album	MediaType

<?php
use Ozdemir\Datatables\Datatables;
use Ozdemir\Datatables\DB\SQLite;

Route::get('/ajax/colreorder', function () {
    $path = dirname(__DIR__).'/database/Chinook_Sqlite_AutoIncrementPKs.sqlite';

    $dt = new Datatables(new SQLite($path));
    $dt->query('Select TrackId, Track.Name, Title as Album, MediaType.Name as MediaType
                from Track
                JOIN Album ON Album.AlbumId = Track.AlbumId
                JOIN MediaType ON MediaType.MediaTypeId = Track.MediaTypeId');

    return $dt->generate();
});

$(document).ready(function () {
    $('#example tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search '+title+'" />');
    });

    var table = $('#example').DataTable({
        serverSide: true,
        responsive: true,
        colReorder: true,
        ajax: 'ajax/colreorder',
        columns: [
            { data: 'TrackId' },
            { data: 'Name' },
            { data: 'Album' },
            { data: 'MediaType' }
        ]
    });

    $('#example tfoot input').on('keyup change', function () {
        table.column($(this).parent().index() + ':visible').search(this.value).draw();
    });
});

Loaded JavaScript:

https://cdn.datatables.net/colreorder/2.0.3/js/dataTables.colReorder.min.js

Loaded CSS:

https://cdn.datatables.net/colreorder/2.0.3/css/colReorder.dataTables.min.css