bootstrap-table.js in Generic JavaScript View

Hi community,

i want to use a table like in JavaScript Table Viw Node inside a Generic JavaScript View Node.

I want to use bootstrap-table.js or jquery.datatables.js

I tried it with the bootstrap-table source code from here:
https://unpkg.com/browse/bootstrap-table@1.17.1/dist/bootstrap-table.css

I copied the source code into a table, created a flow variable to pass the code into Generic JavaScript View Node.

If i try do create the table like in the documentation here
https://examples.bootstrap-table.com/#welcomes/from-data.html#view-source
i get the following error:

TypeError: $(ā€¦).bootstrapTable is not a function ā€¦

Same error when using datatables.js

Can anyone help me with this?

BR

Hi @ptrwlr,

I tried to apply @AlexanderFillbrunn solution from my previous problem to this

It seems to work somewhatā€¦just looks ugly compared to the example :frowning:

bootstrap.knwf.knwf (49.4 KB)

I really hope the generic Javascript View will get a better support for js-dependencies in the futureā€¦

4 Likes

Nice trick to know :+1:

I think itā€™s not working as expected because the core bootstrap javascript and css arenā€™t included and it doesnā€™t seem to be loading the table specific css properly.

Hereā€™s what Iā€™ve been able to get it to show, I think that matches the example?

What I did was add the bootsrap CSS in the first CSS editor, the table bootstrap CSS in the second and use the flow variable to set the CSS in the generic JavaScript view.

Another way of using the library:

bootstrap.knwf.knwf (491.3 KB)

5 Likes

Hi @AnotherFraudUser,

this trick does it. Great.
Many thanks.

Hi @ptrwlr,

great! :slight_smile:
@swebb thank you for your solution as well! :+1:
Will definitely try to apply that for my previous problems.

Hi community,
could it be that the ā€œrequire trickā€ does affect the following hack?

window.top.addEventListener(ā€˜loadā€™, (event) => {
parent.document.querySelector(".knime-panel-header").style.display = ā€œnoneā€;
});
parent.document.querySelector(".knime-panel-header").style.display = ā€œnoneā€;

Itā€™s not working anymore.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.