在加载 table 后调用外部 JavaScript

Question

首先，如果问题已经被问到...并得到回答，请接受我的道歉。我个人经历了多个 google 结果，但看起来答案要么不相关，要么无法以我的理解水平实施。

由于我的无知，我接管了一个 .Net 中的 MVC WebApp 项目，我需要重新设计 UI。这是一个标准应用程序，用户可以在其中使用 HTML 输入查询 SQL 数据库，并在屏幕上获得一些结果供以后操作。

问题是我的 C# 知识等于 0，我的 JavaScript 知识在 0-10 的等级上等于 1，所以请在解释时把我当作 child。

为了方便自己，我购买了一个基于 Bootstrap Paper Design 的主题。现在，它附带的 sortable table 有一些格式 JavaScript，它最初在页面上，但我把它移走了，所以现在它是从外部源加载的 HTML <script> 标签。代码如下：

$(document).ready(function () {
    $('#tbl_Customers').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [6, 12, 24, -1],
            [6, 12, 24, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        }
    });
});

当 table 被硬编码时，格式化 JavaScript 就可以了。我猜这是因为 JavaScript 是在 table 之后加载的。不过，我可能是错的。问题是 table 是根据用户的输入动态构建的。据我了解，JavaScript 函数收集用户的输入，并将其发送到 C# 控制器。然后它接收（来自 C# 模型）格式化为 table 的 HTML 字符串并将其注入现有的 <div>。至少这是我认为会发生的事情。 JavaScript 代码如下：

   // Search function
    function Search_Customer() {
        // Take values from form fields
        p_ref_number = $('#txt_RefNumber').val();
        p_email = $('#txt_Email').val();
        p_fname = $('#txt_FirstName').val();
        p_lname = $('#txt_LastName').val();
        p_add1 = $('#txt_Address').val();
        p_pcode = $('#txt_Postcode').val();
        p_sch = $('#txt_SchoolCode').val();

        // Display alert if all form fields are empty
        if (isEmpty(p_fname) && isEmpty(p_lname) && isEmpty(p_email) && isEmpty(p_sch) && isEmpty(p_pcode) && isEmpty(p_add1) && isEmpty(p_dat) && isEmpty(p_ref_number)) {
            showAlert('Please add search criteria first');
        }
        else {
            p_Data = passSearchValuesToController();

            // Run search function in Controller
            p_URL = '@Url.Action("Get_Contact_Search_Result")';

            // Display the card with search results
            $.post(p_URL, p_Data, function (data_con) {
                $('#displayCustomerResults').html('');
                $('#displayCustomerResults').append(data_con.display);
            });
        };
    };

注入数据的<div>在这里：

<div id="displayCustomerResults" class="col-md-12"></div>

完成此操作后，将显示 table，但没有应由第一个函数的代码应用的格式。

我可能错了，但我认为发生这种情况是因为 table 是在加载格式 JavaScript 之后添加到页面中的。因此，在此前提下，我进一步假设我需要一种在添加 table 后加载脚本的方法。我尝试了几件事，但都失败了。我使用的方法之一是将这三行代码添加到 Search_Customer() 函数的 if 语句的 else 部分。

var tableScript = document.createElement("script");
tableScript.setAttribute("src", "../../Assets/js/custom/search-customer-table.js");
document.body.appendChild(tableScript);

所以，问题是如何从 Search_Customer() 函数的 else 部分加载外部脚本。

非常感谢任何建议。如果我错误地认为问题是由加载顺序引起的，那么请指出正确的方向。

非常感谢。

Answer 1

首先，祝贺您提出的问题措辞得当！

不是动态添加实际上通过 $(document).ready() 只在页面加载时执行一次的脚本（这在调用 $.post() 之前很久就已经发生），您基本上可以获取脚本的内容并在 append() 之后立即执行它，就像我在下面的代码中所做的那样（我无法测试它）：


   // Search function
    function Search_Customer() {
        // Take values from form fields
        p_ref_number = $('#txt_RefNumber').val();
        p_email = $('#txt_Email').val();
        p_fname = $('#txt_FirstName').val();
        p_lname = $('#txt_LastName').val();
        p_add1 = $('#txt_Address').val();
        p_pcode = $('#txt_Postcode').val();
        p_sch = $('#txt_SchoolCode').val();

        // Display alert if all form fields are empty
        if (isEmpty(p_fname) && isEmpty(p_lname) && isEmpty(p_email) && isEmpty(p_sch) && isEmpty(p_pcode) && isEmpty(p_add1) && isEmpty(p_dat) && isEmpty(p_ref_number)) {
            showAlert('Please add search criteria first');
        }
        else {
            p_Data = passSearchValuesToController();

            // Run search function in Controller
            p_URL = '@Url.Action("Get_Contact_Search_Result")';

            // Display the card with search results
            $.post(p_URL, p_Data, function (data_con) {
                $('#displayCustomerResults').html('');
                $('#displayCustomerResults').append(data_con.display);

                // Added this 
                $('#displayCustomerResults')
                  .find('#tbl_Customers')
                  .DataTable(
                     {
                        "pagingType": "full_numbers",
                        "lengthMenu": [
                           [6, 12, 24, -1],
                           [6, 12, 24, "All"]
                        ],
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search records",
                        }
                   });
            });
        };
    };

我添加的内容：

假设已附加到 ID 为 displayCustomerResults 的元素的 HTML 包含一个 ID 为 tbl_Customers.
尝试 find() 附加的 HTML 中 ID 为 tbl_Customers 的元素，并应用 .DataTable() 对该元素所做的任何操作。

在加载 table 后调用外部 JavaScript

Calling an external JavaScript after a table is loaded

javascript

script-tag