Vue SPA: Datatables error when Page is reloaded

2rohith2 · July 2017

Hi All,

I am using Vue CLI and building SPA application. I am using following frameworks.

JQuery (As npm package)
Bootstrap 4 (As CDN)
Datatables (As CDN)

I am using datatable as shown: https://datatables.net/examples/styling/bootstrap4.html
This datatable is used on nested route within child component, which is working fine.

Please refer: Datatables_Before.png

But when the page is reloaded or refreshed, following is not working

Show entries
Search
Sorting on each column
Pagination

Error in console

vue.esm.js?65d7:479 [Vue warn]: Error in mounted hook: “TypeError: $(…).DataTable is not a function”

Please refer: Datatables_After.png

allan · August 2017

Possibly jQuery is being loaded multiple times? If its not that, we'd need a link to the page showing the issue to be able to understand what is going on.

Thanks,
Allan

2rohith2 · August 2017

jQuery is not loaded multiple times. I am using VueJs as SPA along with DataTables.

Steps to reproduce the issue.

npm start - started my vue js app
JQuery, Bootstrap 4 (CDN), Datatables (CDN) all are working fine.
Refresh the page ctrl + r or F5, DataTables is not working and I see this error in chrome console TypeError: $(…).DataTable is not a function.
On the same page, I have opened Chorm console and executed this command $('#example').DataTable() my DataTables are working again.

According to my analysis, when the user refreshes the page, the command in mounted() is executed first before downloading the Datatables CDN. I am using JQuery as npm package so no issue with it.

Source Code: main.js

import Vue from 'vue';
import App from './App';
import router from './router';
window.$ = window.jQuery = require('jquery');

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Source Code: index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>My App</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Datatables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap4.min.css">
</head>

<body>
<div id="app"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<!-- Datatables JS -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap4.min.js"></script>
</html>

Source code: component.vue

<template>
    <div class="container-fluid">
        <div class="card">
            <div class="card-bloc" style="padding:20px 0 20px 0">
                
                <table id="example" class="table table-hover table-bordered dt-responsive" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td>2011/04/25</td>
                            <td>$320,800</td>
                        </tr>
                        <tr>
                            <td>Garrett Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                            <td>2011/07/25</td>
                            <td>$170,750</td>
                        </tr>
                        <tr>
                            <td>Brielle Williamson</td>
                            <td>Integration Specialist</td>
                            <td>New York</td>
                            <td>61</td>
                            <td>2012/12/02</td>
                            <td>$372,000</td>
                        </tr>
                        <tr>
                            <td>Herrod Chandler</td>
                            <td>Sales Assistant</td>
                            <td>San Francisco</td>
                            <td>59</td>
                            <td>2012/08/06</td>
                            <td>$137,500</td>
                        </tr>
                        <tr>
                            <td>Rhona Davidson</td>
                            <td>Integration Specialist</td>
                            <td>Tokyo</td>
                            <td>55</td>
                            <td>2010/10/14</td>
                            <td>$327,900</td>
                        </tr>
                        <tr>
                            <td>Colleen Hurst</td>
                            <td>Javascript Developer</td>
                            <td>San Francisco</td>
                            <td>39</td>
                            <td>2009/09/15</td>
                            <td>$205,500</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</template>

<script>
    import auth from '../auth/index.js'
    export default {
        mounted(){
            $('#example').DataTable();
        }
    }
</script>

@allan Please let me know if you need any further information.
Please provide the fix, I have been blocked by this issue.

allan · August 2017

Happy to offer some help - but I would need a link to a page that shows the issue so I can offer that help.

It sounds very much like jQuery is being loaded again, which would remove any plug-ins. But without a test case and can't confirm that, or offer any alternatives since I can't debug it.

Allan

Vue SPA: Datatables error when Page is reloaded

Vue SPA: Datatables error when Page is reloaded

Answers

Howdy, Stranger!

Categories

DataTables

Vue SPA: Datatables error when Page is reloaded

Vue SPA: Datatables error when Page is reloaded

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables