RowGroup is working locally but not live
RowGroup is working locally but not live
![haj.agency.sandra](https://secure.gravatar.com/avatar/9cc98b84ce2bcd5292d293c90565fb98/?default=https%3A%2F%2Fvanillicon.com%2F9cc98b84ce2bcd5292d293c90565fb98_200.png&rating=g&size=120)
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,
});
});
Answers
I don't think this will work. See the
order
docs for all the options. You will probably want to useorder: [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:
But swapping the commented order option works:
Kevin
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.
No, the order is based on the
DataTable.enum( [...] );
array. I updated the example to just useorder: [2, 'asc'],
:https://live.datatables.net/wibojoxe/2/edit
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
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 theenum
array it will set the type to be theenum
array, not as a string, and will sort ASC / DESC accordingly.Kevin
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.I opened the console on your page and executed the following:
Your column data doesn't match the enum array. For example:
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:Kevin