Several problems with DataTables 3.0.2 (French Date, Columns visibility, ...)

slolo · August 19

Link to test case: https://live.datatables.net/redulida/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hello,

I have just test the last version 3.0.2 of DataTables and I have somes problems with it.

1./ Regression with French dates and ColumnControl

As you can see in the test case, I am not able to filter on a specific date.
see: https://streamable.com/l1f27j

However, in a previous post, you explained how to do it, and it ended up working. I think there has been a regression in date handling.
See https://datatables.net/forums/discussion/81492/unable-to-find-an-exact-date-using-fixedcolumns-component-and-calendar-with-data-in-datetime-format

2./ Column visibility with Bootstrap 4

I think there is a problem with the way you display what columns are visible or not.
Has you can see on the video, there is no way to know what column is really hidden or not.

See: https://streamable.com/0tmudt

3./ Question about the way you select lines in the DataTable for Button (Copy, CSV, ...)

In DataTables version 1.10.x, I believe only the rows visible on the screen were copied. That behavior has changed in version 2: even if only 10 out of 100 rows are displayed, the "Copy" button copies all 100 rows. Is that correct? And if a filter is applied, only the filtered rows are copied.

So, in my example (based on "old code" from version 1.10.x), I assume those lines are no longer needed, right?

"columns": ":not(.no-col-exportable, .no-col-printable)",
"rows": ":visible"

See below:

"buttons" : {
  "dom": {
    "button": {
      "className": "btn btn-sm"
    }
  },
  "buttons": [
    {
      "extend": "copyHtml5",
      "className": "btn-outline-secondary",
      "exportOptions": {
        "columns": ":not(.no-col-exportable, .no-col-printable)",
        "rows": ":visible"
      },
    },

Thanks in advance for your answer and have a nice day.

slolo · August 19

Sorry about point 3, I was mistaken.
I actually got it wrong regarding my previous code.
The :visible selector was intentional, as the goal was to copy only the rows visible on the screen.

So, I need to maintain this behavior—which, as we discussed in another post, has not been available since DataTables version 3 and the removal of jQuery.

I hope you can find a solution to this issue.

Best regards.

allan · August 19

Hi,

1) Date issue - it works if Moment is loaded before DataTables: https://live.datatables.net/redulida/2/edit . I'm not immediately certain why it requires that, I will check.

2) Column visibility dropdown - you are loading Bootstrap 4 but using the default styling integration. That is resulting in a styling conflict. Unless there is a specific reason not to, I would suggest that if you are using Bootstrap 4 on your page, then you should use the Bootstrap 4 styling integration for DataTables. The example linked in (1) above has been updated to do that, and you'll see the column visibility dropdown is formatted correctly.

3) "In DataTables version 1.10.x, I believe only the rows visible on the screen were copied." - if that happened, it was a bug. That will happen if server-side processing was enabled, but the intention was always that all rows on the client-side should be exported.

If you want to limit to just the visible rows, you can use the modifier option of the export options, which is DataTable.SelectorModifier. i.e.:

{
  extend: 'copy',
  exportOptions: {
    modifier: {
      page: 'current'
    }
  }
}

When we discussed :visible before I'd thought we were talking about the columns export:

"columns": "th:visible:not(.no-col-exportable, .no-col-printable)"

That will throw an error since :visible is not a DOM selector - it is a jQuery extension. However, in DataTables 3.0.2 I made a change to allow :visible at the end of a column selector string, so you can now do:

"columns": "th:not(.no-col-exportable, .no-col-printable):visible"

and I expect that should work.

Allan

Several problems with DataTables 3.0.2 (French Date, Columns visibility, ...)

Several problems with DataTables 3.0.2 (French Date, Columns visibility, ...)

Replies