RowGroup is working locally but not live

haj.agency.sandra

Link to test case:
https://staging.rightlivelihood.org/staff/

Debugger code (debug.datatables.net):
ogumal

Error messages shown:
no error message

Description of problem:
I am rebuilding a client's old Wordpress website in Gutenberg and I have built a custom block for the staff archive, using DataTables (with RowGroup and enum plugin) to display the grid and filtration.
Locally everything is done and working well but on the staging site the rowGroup feature is not working. The staff is supposed to be grouped by teams is this particular order, set by enum plugin:
let positionOrder = DataTable.enum(["Executive Team", "Administration & Finance", "Research", "Supporting the Laureates", "Communications"]);

I am using CDN for the DataTable js and css and just updated to the latest version (2.0.8) but it didn't help. Maybe it could work better if I install it with npm instead but have not tried that yet.

DataTable code:

let table = "";
   let positionOrder = DataTable.enum(["Executive Team", "Administration & Finance", "Research", "Supporting the Laureates", "Communications"]);
   $(function () {
      table = new DataTable("#staff", {
         info: false,
         language: {
            "zeroRecords": "No staff found for the selected filters",
         },
         ordering: true,
         order: [1, positionOrder],
         paging: false,
         rowGroup: {
            dataSrc: 1,
         },
      });

      // Activate Select2 on the filter dropdown and remove search field in dropdown
      $(".filter-dropdown").select2({
         minimumResultsForSearch: -1,
      });
   });

kthorngren

order: [1, positionOrder],

I don't think this will work. See the order docs for all the options. You will probably want to use order: [1, 'asc'], instead. I built a simple test case to demonstrate:
https://live.datatables.net/wibojoxe/1/edit

No ordering is applied to the table using this:

var locations = DataTable.enum( ... );

var table = new DataTable('#example', {
    order: [2, locations],
    //order: [2, 'asc'],
});

But swapping the commented order option works:

var table = new DataTable('#example', {
    //order: [2, locations],
    order: [2, 'asc'],
});

Kevin

haj.agency.sandra

Hi! Thanks for your reply, you're definitely onto something.
It seems it's not the RowGroup feature that's not working but the enum plugin, or maybe the combination of them. Though it is working locally as mentioned.
RowGroup with your example of the order option works but it's the alphabetical order, so not what I want here.
I've used this guide to implement the enum plugin, using CDN and the example code at the bottom of the page: https://datatables.net/plug-ins/sorting/enum
Not sure where I got the idea to add a let positionOrder variable to use for order but that did work locally, now the code is looking like the example instead and also working locally but not on the staging site.

Now the code is as follows: not setting DataTables.enum to a variable and also using the enum plugin code directly in my block instead of enqueueing it in functions.php.
Plugin code form here: https://datatables.net/blog/2016/dynamic-enum-sorting#Putting-it-all-together
This is also working locally but not on the staging site... The console log in the for loop is working on staging though.

var unique = 0;

   DataTable.enum = function (arr) {
      var name = "enum-" + unique++;
      var types = DataTable.ext.type;
      var lookup = {};

      for (var i = 0, ien = arr.length; i < ien; i++) {
         lookup[arr[i]] = i;
         console.log(lookup);
      }

      // Add type detection
      types.detect.unshift(function (d) {
         return lookup[d] !== undefined ? name : null;
      });

      // Add sorting method
      types.order[name + "-pre"] = function (d) {
         return lookup[d];
      };
   };

   let table = "";
  
   DataTable.enum(["Executive Team", "Administration & Finance", "Research", "Supporting the Laureates", "Communications"]);

   $(function () {
      table = new DataTable("#staff", {
         info: false,
         language: {
            zeroRecords: "No staff found for the selected filters",
         },
         ordering: true,
         order: 1,
         paging: false,
         rowGroup: {
            dataSrc: 1,
         },
      });

kthorngren

RowGroup with your example of the order option works but it's the alphabetical order, so not what I want here.

No, the order is based on the DataTable.enum( [...] ); array. I updated the example to just use order: [2, 'asc'],:
https://live.datatables.net/wibojoxe/2/edit

order: 1,

This is not correct. Please look at the order docs for the supported configuration options. Minimally you need to use an array containing the column index and the direction.

If you are using the exact same code locally and on the staging site then I can't say why one works and the other doesn't without seeing them. Can you post a link to a test case showing the working local version?

Kevin

kthorngren

Maybe I should explain that Datatables performs type detection of the data in each column. See the columns.type docs for more info also this section of the blog you linked. In the case of my test case Datatables looks at the Office column and if all the data in the column is defined the the enum array it will set the type to be the enum array, not as a string, and will sort ASC / DESC accordingly.

Kevin

haj.agency.sandra

Alright, I will look into the type detection tomorrow but for now I updated the order to be order: [1, "asc"] and it's pushed to staging, where it renders it in the alphabetical order instead of the order logged in the console.

kthorngren

I opened the console on your page and executed the following:

>var table = jQuery('#staff').DataTable();
>table.column(1).data();

Your column data doesn't match the enum array. For example:

<span data-filter="Administration &amp; Finance">Administration &amp; Finance</span>

You could use Orthogonal data to remove the HTML and change the & to & for the sort and type operations. See this SO thread for an example. Maybe something like this:

columnDefs: [{
    targets: 1,
    render: function(data, type, row) {
        if (type === 'sort' || type ==='type') {
            return jQuery( data ).text();
        }
        return data;
    }
}],

Kevin