enum sorting plugin

dylanmac · July 2015

Hi,

Is there a way to pass in the enum list to the plugin? As it is right now I have to hard-code the plugin with my enum list in my JS , and tie it to a specific table. I'd prefer to reference it as a function with a "custom" enum list per table.

Thanks.

allan · July 2015

Currently no - you would need to customise the plug-in to do that. Probably the easiest way would be to have a function that will dynamically create the enum plug-in based on an array given to it.

If you do so I'm sure others would be interested in your code if you are able to share it.

Regards,
Allan

dylanmac · August 2015

OK thanks Alan. I'll try out some ideas.

dylanmac · August 2015

Sorry...Allan

allan · August 2015

Sorry about what? :-).

Allan

dylanmac · August 2015

Allan if I were able to modify the plugin to pass in an array, I'm still unsure where I would pass the array in. To use enum you reference it in columnDefs like so:

"columnDefs": [{ "type": "enum", "targets": 0 }]

allan · August 2015

function myEnum ( name, arr ) {
    $.fn.dataTableExt[ name ] = {};
    $.fn.dataTableExt[ name ].pre = function ( a ) {
        return $.inArray( a, arr );
    };
    $.fn.dataTableExt[ name ].asc = function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    };
    $.fn.dataTableExt[ name ].desc = ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    };
}

Then call with something like myEnum( 'importance' [ 'Important', 'Medium', 'Low' ] );. Obviously call it before you initialise the DataTable and use the name you pass in for the first parameter as the columns.type option.

If you wanted to take it a step further you could make it do automatic type detection as well.

Allan

dylanmac · August 2015

Thanks so much Allan. So I tried implementing this but have run into problems. here's what I did:

Function:

customEnumGrouping = function( name, arr ) {
    $.fn.dataTableExt[ name ] = {};
    $.fn.dataTableExt[ name ].pre = function ( a ) {
        return $.inArray( a, arr );
    };
    $.fn.dataTableExt[ name ].asc = function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    };
    $.fn.dataTableExt[ name ].desc = function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    };
};

Init function

customEnumGrouping('customGrouping', customGroupingArray);

Array

var customGroupingArray = [ 'EQ', 'FX', 'FWD', 'FUT', 'CA', 'MM', 'COL'];

var

var groupOnRowsIndex = 4;

columnDefs

"columnDefs" = [{ "type": 'customGrouping', "targets": groupOnRowsIndex }];

So it seems to be working somewhat. The JSON populating the table has the FWD records first, but the table displays EQ first - which is great. However, the row grouping headers repeat in the display. e.g. EQ, FWD, EQ, FWD, COL, EQ, etc. Moreover if I add console.log(name) to the inner function

$.fn.dataTableExt[ name ].pre = function ( a ) {
console.log(name);
return $.inArray( a, arr );
};

I don't get any output. So it looks like the pre function isn't getting called? What am I doing wrong?

allan · August 2015

Are you able to link to the page so I can try to debug it, or create a test case using JSFiddle please.

Allan

dylanmac · August 2015

Hey Allan,

Well it took a while but I got a working example on JSFiddle:

http://jsfiddle.net/dylanmac/f1kppv95/16/

Thanks so much for your help.

allan · August 2015

You have a customEnumGrouping function, but it isn't being executed.

Also, the column with the enum data in it (colAssetClassCode) isn't visible. How is a user to trigger your custom sorting?

Allan

dylanmac · August 2015

Allan,

In the JSFiddle above I called the customEnumGrouping in the document ready block, before the product table init:

$(document).ready(function () {
    customEnumGrouping('enum', customGroupingArray);
    productDataTable();
});

I changed the visibility of colAssetClassCode in the columnConfig to true and then hide it in the rowGrouping function (redundant for it to show as a row group and as a column). The user doesn't trigger the enum sorting; the custom row grouping sorting is set on table init.

I saved the changes and reset it as base:

http://jsfiddle.net/dylanmac/f1kppv95/

allan · August 2015

I should follow my own documentation a little bit more I guess. Updated fiddle with it working: http://jsfiddle.net/f1kppv95/19/ .

Allan

dylanmac · August 2015

Hi Allan,

Does this actually work for you? It doesn't for me. Moreover I don't see the console.log statement which means it's never entering the "-pre" part of the function.

Dylan

allan · August 2015

Hi Dylan,

Yes, sorry, I need to stop rushing through questions so much. it does work, but I'd forgotten to add the type in the saved example. Update. I've also removed the -asc and -desc as they aren't needed. The -pre function will do it and DataTables will sort ascending or descending internally.

Allan

dylanmac · August 2015

Eureka, that worked. So the type has to be set either in the columnDefs or the columns option - both places isn't necessary.

Thank you so much for taking so much time with this. Really appreciated!

allan · August 2015

Phew - we got there in the end! Thanks for your comment on the enum plug-in page. I think I'll write this up into a blog post and publish it there if that suits. I think this could be quite useful to have as a genetic piece.

Allan

dylanmac · August 2015

Yes absolutely. I only left it there because I wasn't sure where else people would find it. It's very useful!

enum sorting plugin

enum sorting plugin

Replies

Howdy, Stranger!

Categories

DataTables

enum sorting plugin

enum sorting plugin

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables