如何返回 html 异步以及 ajax 数据响应以填充数据表

如何解决如何返回 html 异步以及 ajax 数据响应以填充数据表

我正在开发单个 Web 应用程序，在将异步 html 返回到 index.js（主页）以及 ajax 数据响应以填充数据表时遇到问题。

customer.js

constructor(params) {
    super(params);
    this.setTitle("Customers");
    this.getDataTable();
    console.log("viewing customers");
} 

getDataTable(){ 
    $(document).ready(function(){
        var table = $('#dataTable').DataTable({
                  "ajax": {
                      url: 'GetCustomer',type: 'GET',dataSrc: ""
                  },aoColumns: [
                      { mData: 'customerId' },{ mData: 'customerName'},{ mRender: function (data,type,row) {
                                    return '<button type="button" class="btn btn-success" id="edit_btn"><i class="fa fa-edit"></i></button> '+
                                    '<button type="button" class="btn btn-danger" id="del_btn"><i class="fa fa-trash-alt"></i></button> ';
                                  }
                      },],autofill: true,select: true,responsive: true,buttons: true,length: 10,});
        
        $('#dataTable').on( 'click','#edit_btn',function () {
            var data = table.row( $(this).parents('tr') ).data();
            alert('Acount id '+ data.customerId + '\n '+ data.customerName );
        } );
        
      
     }); 
}

async getHtml() {
    return (
        `
        <div class="mt-4">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="/" data-link>Customers</a></li>
            <li class="breadcrumb-item active">List</li>
        </ol>
       
       </div>
   
         <div class="ml-auto mb-4">
               <a type="button" id="addBtn" class="btn btn-primary" data-rel="4">Add Customer</a>
         </div>
         
          <div class="card mb-4">
            <div class="card-header">
            <p id = "para"></p>  
            <i class="fas fa-table mr-1"></i>
                 List
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                  <th>Account Id</th>
                                  <th>Account Name</th>
                                  <th>Actions</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                  <th>Account Id</th>
                                  <th>Account Name</th>
                                  <th>Actions</th> 
                            </tr>
                        </tfoot>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}

Index.js

    const navigateto = url => {
    history.pushState(null,null,url);
    router();
};

const router = async () => {
    const routes = [
       {path: "/NispCoreWork",view : Dashboard},{path: "/customers",view  : Customers},{path: "/tables",view : Tables}
    ];
    
     // Test each route for potential match
    const potentialMatches = routes.map(route => {
        return {
            route: route,isMatch : location.pathname === route.path
           // result: location.pathname.match(pathToRegex(route.path))
        };
    });
    
    let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch);

    if (!match) {
        match = {
            route: routes[0],isMatch : true
        };
    }
    const view = new match.route.view();
    
    document.querySelector("#app").innerHTML = await view.getHtml();
    


   // console.log(match.route.view());
};

window.addEventListener("popstate",router);

document.addEventListener("DOMContentLoaded",() => {
    document.body.addEventListener("click",e => {
        if (e.target.matches("[data-link]")) {
            e.preventDefault();
            navigateto(e.target.href);
        }
    });

    router();
    
});

我尝试将这些异步 html 和 ajax 响应注入 document.querySelector("#app").innerHTML = await view.getHtml();

但是，它只加载了 html，而无法加载 ajax 数据响应。