Datatable CSS and Column Sorting

[tpascoe]

I recently upgraded our WET-BOEW from 4.0.31.1 to 4.0.61.1. I've noted that the CSS for Datatable headers seems to have changed, and the text in each header is now inside a grey box, with padding all the way around. It's visually distracting, compared to the previous CSS, which simply had the text and sorting buttons on their own in the heading box. Is there a setting or CSS change I can make to return to the 4.0.31.1 look?

On a related note, I've been trying to remove the Sorting buttons from the headers, but still allow for the table to be initialized with the first column sorted. I've had no luck with this, but it seems it would be an easy option. My current datatable definition is as follows:

data-wb-tables='{ "columnDefs":[{"targets": 5, "visible": false, "Searchable": false}], "searchCols": [null, null, null, null, null, { "sSearch": "false" }]}' data-page-length="10">

I've googled for some solutions, with no luck for either issue. Suggestions would be appreciated.

Thanks.

[ghost]

I assuming you're talking about the grey shading when a column is actively being sorted. There been no recent changes to that.

You can view any the related code and any changes at https://github.com/wet-boew/wet-boew/blob/master/src/plugins/tables/_base.scss.

Example of active sorting:

I am just a volunteer on this GitHub project.

[tpascoe]

Thanks for the quick response. However, it's not the grey shading of the active table heading. The text of every header is surrounded with a grey box, padded in from the table border, as below.

[wewhite]

On a related note, I've been trying to remove the Sorting buttons from the headers, but still allow for the table to be initialized with the first column sorted data-wb-tables='{ "columnDefs":[{"targets": 5, "visible": false, "Searchable": false}],

DataTables default sort is the first column, zero index, so that is done without any config. Your defining the sixth column, fifth index to not be visible or searchable.

In order to remove ALL sort/ordering from the user, use: "orderable": false,.

Your data-wb-tables columnDefs could look like this:

    "columnDefs": [
        {
            "orderable": false,
            "targets": "_all"
        },
        {
            "targets": 5,
            "visible": false,
            "Searchable": false
        }
    ]

Note: When first column sort(default) the sort buttons are displayed as to let the user know what column is default sorted, visible, and do not function when ALL sort/order buttons are set to false.

[wewhite]

Thanks for the quick response. However, it's not the grey shading of the active table heading. The text of every header is surrounded with a grey box, padded in from the table border, as below.

I would clear all cache in browser, try private browsing. There were some file location changes I believe, remove all wet-4.0.31 folder locations, replace with wet-4.0.61.

Probably having an issue of old vs new files. I can replicate the size/padding issue, but not the grey box around text issue.

[tpascoe]

Thanks. Setting the ColumnDefs as above has removed the sort buttons for the columns (except for the default first). I only have the 4.0.61.1 directory in the development environment. Even with the sort buttons off, the column names still appear formatted as a button, and are clickable, but obviously with no action. Private browsing had no effect. I'll search some more for bad paths in my master page. Thanks.

[tpascoe]

Ah. I think I may have an answer. We are still using the GCWU theme, and I see this has been abandoned now. I've added the directory to the 4.0.61.1 root, but I suspect there may be a conflict in the CSS versions.

[ghost]

Yes that would cause it as the theme would be missing any new css. You could try to add it, but you are going to have issues with other plugins.

Unfortunately you have to move to the wet-boew or gcweb (canada.ca) theme to use the latest. Which could be a big undertaking depending on size of your project.

I am just a volunteer on this GitHub project.