enum sorting plugin

dylanmac

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

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

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

dylanmac

Sorry...Allan

allan

Sorry about what? :-).

Allan

dylanmac

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

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

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

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

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

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

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

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

Allan

dylanmac

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

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

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

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

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