jQuery选项卡不适用于jQuery DataTables的Page2

问题描述

我有一个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#">
                   

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)