enum sorting plugin

enum sorting plugin

dylanmacdylanmac Posts: 49Questions: 7Answers: 1

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.

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    Sorry...Allan

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Sorry about what? :-).

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    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 }]
    
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    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?

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

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

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    edited 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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    edited 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/

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

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

    Allan

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    edited 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!

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1

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

This discussion has been closed.