jQuery datagridview sorting - maikelbos0/VDT GitHub Wiki

As mentioned in column options, by default sorting is enabled for all columns, except for those columns where the property sortable is explicitly set to false. When sorting is enabled for a column the header of that column becomes clickable. When the user clicks on it, a datagridview.sorted event is triggered on the element that was turned into a data grid view. This event provides a copy of the meta data as a second parameter of the event handler. This copy is updated to reflect the new sort column and order and is normally passed back to the populate function to show the user the sort operation has succeeded.

<div id="example-table"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    });

    $('#example-table').on('datagridview.sorted', function (event, metaData) {
        // Get your new data here, based on the provided meta data and any other parameters
        // Normally populating might happen in the success-callback of an AJAX-function
        let data = [];

        $(this).datagridview(function () {
            this.populate(metaData, data);
        });
    });
</script>

When both sorting and paging are available, it is recommended to use the same event handler for both events. They have the same signature and normally both would refresh your data and meta data.