如何在每個頁面中加載頁眉HTML文件

Question

1. 我有一個HTML標題頁，它由動態加載的導航欄組成，我也有其他幾個頁面。

2. 我想在我的每個頁面中都包含Navbar（ Header.html ），以減少代碼，我正在使用J Query .load function執行類似的正確操作，並且它也可以正常工作

3. 我面臨的問題是我有Bootstrap 4導航欄，在其他頁面中，我通過單擊表單的提交來擁有一個表單，我正在呈現一個具有導出按鈕的HTML表，並且我正在使用table2export cdn將表導出到卓越

4. 所以當我用表加載標題時，它顯示錯誤Uncaught TypeError: $(...).table2excel is not a function當我刪除並在每個頁面中寫入導航欄代碼而不是將其加載到每個頁面中時它就可以了精細

HTML

    <div id="header"></div>
    <h4 class="text-center">Date wise Outlet wise Sales Summary :</h4>
            <form id="formId" method="get">
                <div class="container">
                    <h4>Start Date:</h4>
                    <input  type="text" id="startdate" name="fromdate" width="276"
                        placeholder="dd/mm/yyyy" required onchange="checkDate()" />
                    <h4>End Date:</h4>
                    <input  type="text" id="enddate" name="todate" width="276"
                        placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
                    <h4>Outlets:</h4>
                    <select name="outlet" id="myselect">

                        <option>ALL</option>
                    </select> 
                 <div><br>
                        </div>
                    <div>
                        <br>
         <button id="button" class="btn btn-default" type="submit">Search</button>
                    </div>
                </div>
            </form> 
            <div class="loader"></div>
            <div class="overlay"></div>
            <div id="tbl"></div>

            <button id="export-btn">
                <i class="fa fa-file-excel-o" aria-hidden="true"></i>&nbsp;  Export
            </button>
        <div style="padding-bottom: 100px">
        </div>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

            <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js"
                type="text/javascript"></script>
<script src="https://rawgit.com/unconditional/jquery able2excel/master/src/jquery.table2excel.js"></script>  //using this one to export
                <script type="text/javascript" src="JS/Datewiseolwise.js"></script>  // this is for table rendering js code
                <script type="text/javascript" src="JS/headerfooter.js"></script> //this is my header javascript file
                <script type="text/javascript" src="JS/Date.js"></script>
                <script type="text/javascript" src="JS/Outletlist.js"></script>



        **javascript for loading the header in each page**



       $(document).ready(function() {
                  $("#header").load("Header.html"); 
    });

這是我的導航欄代碼

<nav
    class="navbar navbar-expand-sm bg-dark navbar-dark navbar fixed-top">

    <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul id="navbarId" class="navbar-nav mr-auto">

        </ul>

    </div>

    <a class="navbar-brand" href="Header.html">HOME</a>

</nav>
<div style="padding: 30px"></div>



<div class="col-sm-12">
    <div class="name"></div>
    <hr style="border: solid 1px black">
</div>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src="JS/Header.js">
</script>

我的事情是將cdn的CDN放置在正確的位置有問題，但是我已經努力嘗試了它不起作用並拋出相同的錯誤

任何人在那里請檢查我所缺少的

header5.js腳本

$(document).ready(function() {
    $.ajax({
        url : "HeaderServlet",
         method : "GET",


         success : function(data) {


                for (var item in data) { 
                    var _menu = "";
                    var _submenuData = data[item];
                    if(_submenuData.length > 0) {
                        var _submenu = "";

                        for(var i = 0; i < _submenuData.length; i++) {
                            _submenu += "<a class='dropdown-item' href='" + _submenuData[i]["link"] + "'>" + _submenuData[i]["type"] + "</a>";
                    }

                    _menu = "<li class='nav-item dropdown'>"
                            + "<a class='nav-link dropdown-toggle' href='' id='navbardrop' data-toggle='dropdown'> " + item + " </a>"
                            + "<div id='drop' class='dropdown-menu'>"
                            + _submenu
                            + "</div>"
                            + "</li>";
                    }


                    $("#navbarId").append(_menu);
                }




                var _logout = "<li class='nav-item'>" +
                "<a class='nav-link' href='Logout'>  Logout  </a>" +
                "</li>";
                 $("#navbarId").append(_logout);


         }

      });

    $.ajax({
        url : "LoginServlet",
         method : "GET",


         success : function(data) {

             $(".name").text("Welcome '" +data[0].Name + "'-" +data[0].Companyname)

         }
    });

   });

Answer 1

您好，首先打開控制台，然后編寫簡單的“ table2excel”檢查庫加載或不加載？

如果庫已加載，則使用like

$("#yourHtmTable").table2excel({
    exclude: ".excludeThisClass",
    name: "Worksheet Name",
    filename: "SomeFile" //do not include extension
});

CDN