DataTable (bs5)

1

In the future I will need DataTable (bs5). (Demo for bs4 works fine)
In the demo “Datatable.project” for bs5 I see that column alignment (“text-right”) does not work:

{
title: "Salary",
class: "text-right"
}

And row selection does not work:

Button4.onclick = function() {
var table;
table = $("#DataTable1").DataTable();
$(table.rows().nodes()).removeClass("highlight");
$(table.cells().nodes()).removeClass("highlight");
$(table.row(2).nodes()).addClass("highlight");
};

I also have a question, is it possible to define column widths?

2

DataTables was not developed by us, so we’re not experts. However, they have excellent documentation with lots of samples.

They also have active forums for support.

3

The header element of the AppStudio project has a CSS file:

<link href="toolbox/bs5/dist/css/dataTables.bootstrap5.min.css" rel="stylesheet">

it is different than the one on the page DataTables example - Bootstrap 5

CSS file:

<link href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css" rel="stylesheet">

They differ in content. There is no “dt-type-numeric” class in AppStudio.

And the class in the AppStudio project in the numeric field is called:
class="text-right"

On the page DataTables example - Bootstrap 5 it is different:

class="dt-type-numeric"

So shouldn’t this be fixed in AppStudio?

4

Maybe I can replace the CSS file myself?
If I place the correct CSS file in the application window (CSS tab) then everything is fine, but how do I stop the incorrect file from loading?

5

It looks like there has been an update to the DataTables libraries. We’ll get that into the next build.

In the meantime, your workaround with the CSS tab makes sense.

1 Like