Modal display examples for Vue Js projects

denisPF

Thanks Kevin,

I have tried to follow your recommendations but still no success. I'm trying to open a detail modal
when the user click over the first table column like in the example from the page [https://datatables.net/extensions/responsive/examples/display-types/modal.html].

My imports are as follows:

import "bootstrap/dist/css/bootstrap.min.css"
import "jquery/dist/jquery.min.js"
import $ from 'jquery'

//Datatable Modules
// CSS
import "datatables.net-responsive-dt/css/responsive.dataTables.min.css"
import "datatables.net-dt/css/jquery.dataTables.min.css"
// JS
import "datatables.net-dt/js/dataTables.dataTables.js"
import "datatables.net/js/jquery.dataTables.min.js"
import "datatables.net-responsive/js/dataTables.responsive.min.js"
import "datatables.net-buttons/js/dataTables.buttons.js"_

And the snippet that contains my table is as follows:

<table id="example" class="dataTable no-footer dtr-inline collapsed display responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
            <td>8422</td>
            <td>g.winters@datatables.net</td>
        </tr>
        <tr>
            <td>Ashton</td>
            <td>Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
            <td>1562</td>
            <td>a.cox@datatables.net</td>
        </tr>
    </tbody>
</table>

and the code snippet that I am responsible for inserting the modal into my datatables structure is as follows:

 $(document).ready(function () {
    $('#example').DataTable({                    
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {                                    
                        var data = row.data();
                        console.log(data);
                        console.log(data[0]);
                        console.log(data[1]);
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll()
            }
        }
    });
});

From my debug I noticed that the line below

renderer: $.fn.dataTable.Responsive.renderer.tableAll()

it runs only once at the beginning but then it doesn't run anymore.
You would have an idea what could be happening. As I said earlier the icon with the "+" sign does not appear
nor the "hand icon" when I move the mouse over the first column of the table that should be responsive.

Is one of the imports missing?
I'm using Vue JS but I don't think that's the problem.

I would appreciate it if someone could help me find the fast track to solution...

Att,
Adenilson

kthorngren

Continuation of this thread. Its better to keep the same conversation in one thread.

As I said earlier the icon with the "+" sign does not appear

That suggests all of the columns are shown on the page. Is this true? Maybe post a screenshot.

Kevin

kthorngren

It looks like you might be loading datatables.js twice:

import "datatables.net-dt/js/dataTables.dataTables.js"
import "datatables.net/js/jquery.dataTables.min.js"

It might be that "datatables.net-dt/js/dataTables.dataTables.js is a concatenated version from the download builder that might have responsive and other extensions bundled in. Open this file in a text editor and see if you find a section like this:

 * Included libraries:
 *   DataTables 1.12.1, Responsive 2.3.0

If you do then make sure you don't load responsive.js a second time. Basically you want to only load the JS includes (and CSS includes) only once.

Kevin

denisPF

Kevin,

I've double check the imports and I left only the ones you recommended but unfortunately the result is still not responsive when I click on the first column.

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import "bootstrap/dist/css/bootstrap.min.css"
import "jquery/dist/jquery.min.js"
import "jszip/dist/jszip.js"
import "pdfmake/build/pdfmake.js"
import $ from 'jquery'
import SwsApplication from '@/sws.application.js'

//Datatable Modules

// CSS
import "datatables.net-responsive-dt/css/responsive.dataTables.min.css"
import "datatables.net-dt/css/jquery.dataTables.min.css"

// JS
import "datatables.net/js/jquery.dataTables.min.js"
import "datatables.net-responsive/js/dataTables.responsive.min.js"

Follow attached is a screen print with the table

I'm now out of ideas on how to solve this failure...

regards,
Adenilson

kthorngren

All of the columns are visible so none are in responsive mode. Make your browser window smaller and you should see columns being hidden and the plus button showing in the first column. Now you should be able to click and see the modal.

Kevin