how can I use the api with vue3 to add child row

how can I use the api with vue3 to add child row

jjbcodejjbcode Posts: 12Questions: 3Answers: 0

Hello I am new to using datatables and I cannot figure out how to use the api with vue3. I am trying to add a child row but I am not having any success. Are there any examples out there?

Answers

  • allanallan Posts: 62,083Questions: 1Answers: 10,179 Site admin

    Hi,

    This part of the manual covers how to use the DataTables API in a Vue application. The docs also link to this example which shows it in action.

    Allan

  • jjbcodejjbcode Posts: 12Questions: 3Answers: 0

    Thank you Allan, I looked at that part of the manual a bunch of times and for some reason I was confused. I will give it another try today. Thanks again.

  • jjbcodejjbcode Posts: 12Questions: 3Answers: 0

    This is what I tried for adding a child table on page load. I am new to this so maybe I am missing something very simple
    ```
    onMounted(function () {
    dt = table.value.dt()
    dt.table.rows().every( function () {
    this.child(
    $(
    '<tr>'+
    '<td>'+"Hello"+'.1</td>'+
    '<td>'+"Hello"+'.2</td>'+
    '<td>'+"Hello"+'.3</td>'+
    '<td>'+"Hello"+'.4</td>'+
    '</tr>'
    )
    )
    .show();
    } );

    } );

  • kthorngrenkthorngren Posts: 20,466Questions: 26Answers: 4,804

    You might be getting an error like this in the browser's console:

    Uncaught TypeError: dt.table.rows is not a function

    I think you will need to remove table from dt.table.rows(). Like this example:
    https://live.datatables.net/rivokaxa/1/edit

    Kevin

  • jjbcodejjbcode Posts: 12Questions: 3Answers: 0

    kthorngren thank you for your reply. I was getting that error and I made the change you mentioned. now I get this error with the "this" keyword
    ``` 'this' implicitly has type 'any' because it does not have a type annotation.

    not sure why I am having so much trouble with this

Sign In or Register to comment.