CODEWITHSUNDEEP
javascriptjqueryvue.jsdatatablesvuejs2
user3204899
user3204899

Reputation: 61

jQuery DataTables child rows with Vue syntax

I have Vue JS component with a jQuery DataTables table in it. I want to add multiple child rows to each main row. This can be done like this:

this.table = $('#dataTable').DataTable({stateSave: true});
        var self = this;
        this.table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();

            let row = self.table.row(this).child(
              $('<tr id="thisIsAChildRow"></tr>' )[0]
            ).show();

        } );

That works well, but I have to add some Vue logic into the child row. In this case those codes are not working because are not compiled to the Vue template, so basically the Vue renderer thinks these are just plain html codes.

After searching hours on the web without success, I ended up with a very dirty workaround which works if there is only one child row. I attach a new Vue instance to every table row I create (using the 'el' syntax). I know there can be a lot of performance issues with it, but I could still use that solution until I find better one.

    initTable(){
        this.table = $('#dataTable').DataTable({stateSave: true});
        var self = this;
        this.table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();

            let orderId = data[0];
            let row = self.table.row(this).child(
              $('<tr id="vue'+orderId+'"></tr>' )[0]
            ).show();

            self.createNewVueForChildRows(orderId)
        } );
    },

    createNewVueForChildRows(orderId){
        new Vue({
            el: '#ordervue'+orderId,
            data: {
                orderId:orderId,
            },
            template:'<tr ><td>{{orderId}}</td></tr>',
        });
    },

However, I need to add multiple child rows to one row, but a Vue template can only handle one root element.

I need to have the same columns in my child rows as in my parent rows.

Does anyone have a solution or a suggestion for me?

Upvotes: 0

Views: 1379

Answers (1)

Gaurav
Gaurav

Reputation: 609

An easier solution will be to use vue-bootstarp table component. It allows you to use the power of data tables while keeping everything inside vue components. For the child row option you should be looking at row-details slot option available in the documentation. You can easily access all the data available to table and also manipulate it from inside the vue.

Copying the example from the docs for showing child rows:

  <template slot="row-details" slot-scope="row">
    <b-card>
      <ul>
        <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
      </ul>
    </b-card>
  </template>

Upvotes: 1

Related Questions