Saturday, April 1, 2017

In laravel SPA, I use the DataTables , when I use laravel's vue component，vue also require jquery, so the DataTables can't be load correctly

In laravel SPA, When I use the DataTables which depends on jQuery, when I use laravel's vue component，vue also require jquery, so the DataTables can't be load correctly， because loading jquery twice. what should I do?

index.blade.php

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>控制台 | </title>

        <!-- Bootstrap -->
        <link href="/assets/admin/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- ...some css... -->

        <!-- Datatables -->
        <link href="/assets/admin/gentelella/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
        <link href="/assets/admin/gentelella/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
        <link href="/assets/admin/gentelella/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
        <link href="/assets/admin/gentelella/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
        <link href="/assets/admin/gentelella/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">

        <!-- Custom Theme Style -->
        <link href="/assets/admin/gentelella/build/css/custom.min.css" rel="stylesheet">
    </head>

    <body class="nav-md">

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

        <!-- load jQuery first-->
        <script src="/assets/admin/gentelella/vendors/jquery/dist/jquery.min.js"></script>
        <!-- here is some plugins, they maybe dependent on jquery,so I can't delete previous line -->
        <!-- FastClick -->
        <script src="/assets/admin/gentelella/vendors/fastclick/lib/fastclick.js"></script>
        <!-- NProgress -->
        <script src="/assets/admin/gentelella/vendors/nprogress/nprogress.js"></script>


        <!-- Datatables -->
        <script src="/assets/admin/gentelella/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
        <script src="/assets/admin/gentelella/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>

        <!-- main.js loaded jQuery already -->
        <script src=""></script>

        <!-- Custom Theme Scripts -->
        

    </body>
    </html>

bootstrap.js

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');


via Fate
Labels: ,

Advertisement