Answers

• kthorngren Posts: 21,300Questions: 26Answers: 4,945

  June 28

  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 Posts: 3Questions: 1Answers: 0

  July 1

  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 Posts: 21,300Questions: 26Answers: 4,945

  July 1

  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 Posts: 21,300Questions: 26Answers: 4,945

  July 1 edited July 1

  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 Posts: 3Questions: 1Answers: 0

  July 1

  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 Posts: 21,300Questions: 26Answers: 4,945

  July 1

  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