Question

我有一个HTML Header页面，其中包含可动态加载的导航栏，并且我还有其他几个页面。
我想在我的每个页面中包含导航栏（Header.html），以减少代码，我正在使用J Query .load function做正确的事情，并且也能正常工作
我面临的问题是我拥有Bootstrap 4导航栏，在其他页面中，我通过单击表单提交来拥有一个表单，我正在呈现一个具有导出按钮的HTML表，并且我正在使用table2export CDN可以将表格导出到excel
所以当我在表中加载标题时，如果我在每个页面中删除并写入导航栏代码而不是将其加载到每个页面中，则会显示错误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>

我将table2excel的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

如何在每个页面中加载页眉HTML文件

1 个答案: