JQuery 選項卡不適用於 Jquery DataTables 的 Page2

Question

我有一個 Coldfusion 應用程序，它輸出使用 JQuery DataTables 格式化的 cfquery 結果。 這按預期工作。 但是在 jQuery 數據表顯示中，我有使用 jQuery 選項卡 UI 格式化的內容。 奇怪的是，它在分頁結果的第一頁上正確構建了選項卡，而不是在任何其他分頁頁面上。

我認為這可能與引用的 jQuery 選項卡不是唯一的 ID 相關，因此我將每個 DIV 的 ID 的名稱附加到我的 CFQuery 結果的唯一輸出，但這沒有幫助。

我假設它只是沒有執行 jQuery 代碼來在 jQuery DataTables 的后續頁面上構建選項卡，但是當您單擊第二頁鏈接時，我不知道如何強制它這樣做。 我也可能離開，但這是我的懷疑。

這是我的大多數 jQuery DataTables 和 TABS UI 的代碼。 我認為不需要全部，只需要大部分代碼。

有沒有人對此有任何見解？

<table id="dashboard_table1" width="100%" class="display" data-tableid="1">
    <thead>
        <tr>
          <th width="6%" style="text-align: left">&nbsp;</th>
            <th width="13%" style="text-align: left">Customer ID</th>
            <th width="44%" style="text-align: left">Customer Name</th>
            <th width="37%" style="text-align: left">Phone Number</th>
        </tr>
    </thead>
      <tbody>
    <cfoutput query="residential_customers">
        
        <tr>
          <td style="text-align: left">&nbsp;</td>
            <td style="text-align: left">#customer_id#</td>
            <td style="text-align: left">
            
            <a id="edit-customer-open#customer_id#" href="##edit-customer-modal#customer_id#" rel="modal:open">#company_name#</a>
            
            <!--- Edit  customer modal --->                        
            <div id="edit-customer-modal#customer_id#" style="display:none; width:70%; padding:10px;">
                <fieldset>
                <legend><h1>Edit Customer Form</h1></legend>
                    <form name="edit_customer#customer_id#" id="edit_customer" method="post" action="actionpages/edit_customer.cfm">
                    <h3>Customer Number: #customer_id#</h3>
                    <input type="hidden" name="edit_customer_id" value="#customer_id#" />
                    <br />
                    
                    <strong>Customer Name:</strong><br />
                    <input name="edit_customer_name" id="edit_customer_name" type="text" required placeholder="Customer Name" value="#company_name#"><br><br>
                    
                     <strong>Customer Type:</strong><br />
                    <select name="customer_type" id="customer_type" required>
                    <option selected="selected" value="#customer_type#">#customer_type#</option>
                    <option value="bot">Block of Time</option>
                    <option value="billable">Billable</option>
                    <option value="residential">Residential</option></select>
                    
                    <br /><br />

                    
                    <strong>Primary Billing Contact*:</strong><br>
                    <input name="edit_first_name" id="edit_first_name" type="text" required placeholder="First Name*" value="#first_name#"> &nbsp;
                    <input name="edit_middle_name" id="edit_middle_name" type="text" placeholder="Middle Initial/Name" size="15" value="#middle_name#"> &nbsp;
                    <input name="edit_last_name" id="edit_last_name" type="text" required placeholder="Last Name*" value="#last_name#"> &nbsp;
                    <br><br>
                    
                    <input name="edit_email_address" id="editw_email_address" type="email" required placeholder="Email Address" value="#email_address#"><br>
                    <input name="edit_primary_phone" id="edit_primary_phone" type="text" required placeholder="Primary Phone Number" value="#phone1#"><br>
                    <input name="edit_alternate_phone" id="edit_alternate_phone" type="text" placeholder="Alternate Phone Number" value="#phone2#"><br><br>
                    
                    <strong>Company Address:</strong><br>
                    <input name="edit_address1" id="edit_address1" type="text" required placeholder="Address 1" value="#address1#"><br>
                    <input name="edit_address2" id="edit_address2" type="text" placeholder="Address 2" value="#address2#"><br>
                    <input name="edit_city" id="edit_city" type="text" required placeholder="City" value="#city#"><br>
                    <input name="edit_state" id="edit_state" type="text" required placeholder="State" value="#state#"><br>
                    <input name="edit_zip" id="edit_zip" type="text" required placeholder="Zip" value="#zip#"><br><br>
                    
                    Is Account Active?: <input type="checkbox" value="yes" name="active" id="active" <cfif #status# eq 1>checked="checked"<cfelseif #status# eq ''>checked="checked"</cfif> /><br /><br />

            
                    <input type="hidden" name="ticket_type" value="residential">
            
                    <input class="stylized_btn" type="submit" value="Save Customer"><div class="response" id="editdCustomerMessage"></div> 
            
                </form><br /><br /><hr />

                <script>
                  $( function() {
                    $( "##customer_tabs#customer_id#" ).tabs();
                  } );
                  </script>
                
                <!---Tabs --->  
                  <div id="customer_tabs#customer_id#">
                    <ul>
                      <li><a href="##customer_files#customer_id#">Customer Files</a></li>
                      <li><a href="##ticket_alerts#customer_id#">Ticket Alerts</a></li>
                      <li><a href="##customer_statements#customer_id#">Statements</a></li>
                      <li><a href="##customer_statement_history#customer_id#">Statement History</a></li>
                      <li><a href="##customer_ticket_history#customer_id#">Ticket History</a></li>
                      </ul>
                   
                   <div id="customer_files#customer_id#">
                   
                    <table  width="99%"  border="0" align="center" cellpadding="5" cellspacing="0">
                <tr><td>
                <!---File Upload section --->
                   <div id="AttachFile#customer_id#">
                        <div id="fileUploadDiv#customer_id#"></div>
                        
                        <cfoutput>
                        <script type='text/javascript'>
                        function PopulateFileUploadDiv#customer_id#(){
                            $('##fileUploadDiv#customer_id#').load('templates/file_upload.cfm?test=1&customer_id=#customer_id#&customer_type=residential');
                        }
                        $(document).ready(PopulateFileUploadDiv#customer_id#);
                        </script>
                        </cfoutput>
                   </div>
                </td></tr></table><br />
                <!---End of File Upload section --->
               
               
                   </div>
                   
                   <div id="ticket_alerts#customer_id#">
                   

Answer 1

好的，所以運行這段 Javascript 似乎會強制創建 TABS UI。 不是那么優雅，但它有效。 有沒有更好的辦法？

                 <script>
                 $('tr').on('click',function(){
                    //console.log("This is a test"); 
                    $( "##customer_tabs#customer_id#" ).tabs();
                    PopulateFileUploadDiv#customer_id#();
                  });
                </script>