时间戳

首页 > 解决方案 > 如何在每个页面中加载 Header HTML 文件

javascript - 如何在每个页面中加载 Header HTML 文件

问题描述

  1. 我有一个 HTML Header 页面，它由动态加载的导航栏组成，我还有其他几个页面。

  2. 我想Header.html在我的每个页面中包含导航栏（）以减少我正在使用的正确操作的代码，J Query .load function并且它也可以正常工作

  3. 我面临的问题是我有 Bootstrap 4 导航栏，在其他页面中我有一个表单，通过单击表单的提交我正在呈现一个 HTML 表，该表也有一个导出按钮，我正在使用table2exportcdn 将表导出到擅长

  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>

这是我得到的错误

我认为将cdntable2excel放在正确的位置有问题，但我已经努力尝试它不工作并抛出同样的错误

任何人都请检查我错过了什么

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)

         }
    });

   });

标签： javascriptjqueryhtml

解决方案

您好，首先打开控制台并编写简单的“table2excel”检查库加载与否？

如果加载了库，则使用 like

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

内容分发网络

推荐阅读