ColdFusion, JQuery отображение таблицы в div

Question

Я пытаюсь отобразить таблицу данных на моей странице, когда пользователь вводит код клиента - при передаче параметра и запрос возвращает правильные данные, но когда данные возвращаются, они находятся в стандартной таблице и не отформатированы так, как должны , Ниже приведен мой код для страниц: страница индекса

Страница данных

<cfquery name="getRegions" datasource="EpicorDatasource">
SELECT 
C.CustID, C.Name,
SH.PackNum, 
SH.OTSOrderNum as 'OrderNumber',
SH.ShipDate,  
SH.ShipStatus, 
SD.PackLine,
SD.PartNum,
SD.LineDesc,
SD.ShipCmpl,
SD.SellingInventoryShipQty as 'ShipQty'

FROM 
ShipDtl SD
    LEFT JOIN ShipHead SH
        ON SD.Company = SH.Company AND SD.PackNum = SH.PackNum 
    LEFT JOIN Customer C
        ON SH.Company = C.Company AND SH.CustNum = C.CustNum

WHERE 
(SH.ShipDate>GetDate()-45) 
AND (SD.Company='AGR001') 
AND (C.CustID = <cfqueryparam value = "#url.custCode#" cfsqltype="cf_sql_varchar">)
</cfquery>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://use.fontawesome.com/ec970e4b9e.js"></script>

  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">



<style type="text/css">
    .bs-header-margin{
      margin: 20px;
    }

    .btn-default
    {
        background-color: #020152;  
        color:#fffff;
        border-color: #020152;  
    }

    .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
        background-color: #020152;  
        color:#fffff;
        border-color: #020152;
    }

    /* Ensure that the demo table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        margin: 0 auto;
    }

    div.container {
        width: 80%;
    }

</style>



<cfif getRegions.recordcount>
<cfoutput>
        <div id="dt_div">
            <table id="dt_table" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Customer ID</th>
                        <th>Customer</th>
                        <th>Pack Number</th>
                        <th>Order Number</th>
                        <th>Ship Date</th>
                        <th>Ship Status</th>
                        <th>Pack Line</th>
                        <th>Part Number</th>
                        <th>Part Desc</th>
                        <th>Ship Qty</th>                       
                    </tr>
                </thead>
                <tbody>
                    <cfloop query="getRegions">
                        <tr>
                            <td>#getRegions.CustID#</td>
                            <td>#getRegions.Name#</td>
                            <td>#getRegions.PackNum#</td>
                            <td>#getRegions.OrderNumber#</td>
                            <td>#getRegions.ShipDate#</td>
                            <td>#getRegions.ShipStatus#</td>
                            <td>#getRegions.PackLine#</td>
                            <td>#getRegions.PartNum#</td>
                            <td>#getRegions.LineDesc#</td>
                            <td>#getRegions.ShipQty#</td>

                        </tr>
                    </cfloop>
                </tbody>
            </table>
        </div>
</cfoutput>
    </cfif>





    <script>
        $(document).ready( function () {
            $('#dt_table').DataTable({
        "lengthMenu": [[15, 40, 60, -1], [15, 40, 60, "All"]]
        });
        } );
    </script>

Я не уверен, что мне не хватает, но, надеюсь, кто-то может помочь. Спасибо

Answer 1

- As per the example above: https://www.quackit.com/ajax/tutorial/
- It works if you add the below code snippet in selectRegions.js page after this line "document.getElementById("regionList").innerHTML=oXmlHttp.responseText"

$('#dt_table').DataTable({
        "lengthMenu": [[15, 40, 60, -1], [15, 40, 60, "All"]]
    });