DataTables custom column sort

Victor Garcia commented on May 11, 2018

Hi Team,

I have a datatable with the following structure:

The problem is that the column "range" is ordered like a string, so the resulting order of the ranges is incorrect, but I wonder if there is a way to define a custom order function for the column in the datatable so the order of the ranges would be correct.

Thaks for all your help!

KoolReport commented on May 11, 2018

I see, here is a quick solution, change your range to 000-020 021-041 and so on.

David Winterburn commented on May 11, 2018

Hi Victor,

Here's a general solution for custom sorting with DataTables:

<script>
    function customCompare(a, b) {
	//implement your custom sort here
        return a < b;
    }
    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
        "customType-asc": function (a, b) {
            return customCompare(a, b);
        },
        "customType-desc": function (a, b) {
            return ! customCompare(a, b);
        }
    } );
</script>
<?php 
    DataTables::create(array(
        "dataSource" => $this->dataStore('dataStore1'),
        "options" => array(
            'columnDefs' => array(
                array(
                    'type' => 'customType',
                    'targets' => 0, //target the first column
                )
            )
        )
    ));
?>

Thanks!

Victor Garcia commented on May 11, 2018

Thanks David, I wanted to keep the ranges without leading zeros so your solution was what I was looking for.

Is there a way to disable the initial sorting so the datatable gets sorted only when the user clicks?

I've tried "order": [] with no luck.

Thanks!

David Winterburn commented on May 12, 2018

Hi Victor,

Please use this template for initial sorting:

    function computeInitialOrder(a) {
	//Implement initial order here
    }

    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
	"customType-pre": function (a) {
            return computeInitialOrder(a);
        },
        "customType-asc": function (a, b) {
            return customCompare(a, b);
        },
        "customType-desc": function (a, b) {
            return ! customCompare(a, b);
        }
    } );

or try another way:

<?php 
    DataTables::create(array(
        "dataSource" => $this->dataStore('dataStore1'),
        "options" => array(
            'columnDefs' => array(
                array(
                    'type' => 'customType',
                    'targets' => 0, //target the first column
                )
            ),
            'order' => array(
                array(0, 'asc')
            )
        )
    ));
?>

Thanks!

KoolReport's Forum

DataTables custom column sort #277

Build Your Excellent Data Report