bootstrap-table.js in Generic JavaScript View

[ptrwlr]

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

[AnotherFraudUser]

Hi @ptrwlr,

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

Generic JavaScript View - Include multiple dependencies

Hi, I agree that it can be cumbersome to get this to work. Most of the time, the problem is that the Asynchronous Module Definition hijacks the module. I circumvent this by manually defining module and exports objects, then create a require function that returns exactly what the imported module needs and reset everything again after the module has loaded. Also, I usually load external dependencies via GET Request node and then insert them via flow variable. The code in the Generic JS View look…

It seems to work somewhat…just looks ugly compared to the example

bootstrap.knwf.knwf (49.4 KB)

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

[swebb]

Nice trick to know

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)

[ptrwlr]

Hi @AnotherFraudUser,

this trick does it. Great.
Many thanks.

[AnotherFraudUser]

Hi @ptrwlr,

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

[ptrwlr]

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.