Can I invoke the draw() function on a Datatablevue3 component?

Zuby

Description of problem:
I'm building an app and I want to use Datatables with Vue 3 and bootstrap 5 with the serverside option. I'll be using Datatables is a lot of pages and I don't want to get the data independently and populate the table using the data option. It would mean that I'll have to load the entire data into the clientside. In a previous app I did with datatables I used the draw() function to dynamically display the latest records on the table. But with the Datatablevue3, how can I call a function that makes the Ajax call to refresh the data of the table

allan

You can grab a DataTables API reference as described here. You'll then be able to call draw() on it.

Allan

Zuby

Oh wow. I read that vue installation doc many times but I just didn't get that part. Let me try it. Thanks a lot.

Zuby

But i don't fully understand the code.
this is the example

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component
 
onMounted(function () {
  dt = table.value.dt;
});

if we use let to declare dt. How come dt is appended here table.value.dt and then assigned to dt? I understand the ref and the const table. Pls could you explain a little more.. pls. It will help me know how to use it better

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Vue will make a reference we can access via the table variable (line 2). That reference then has a value.dt property which is assigned by the Vue DataTables component. That is the API reference. We use line 5 to assign it to the simple dt variable for use.

I don't massively like that part of the API either... Its a little bit too much like "magic"

Allan

Zuby

Yes it does look like magic. I starred at it for a while. Means I can call the variable anything. Great! Your explanation has lifted a lot off my shoulders. Oh thanks alot Allan

allan

Means I can call the variable anything.

Places you right into one of the two really hard problems in programming...

Allan