如何解决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"> </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"> </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#">
<input name="edit_middle_name" id="edit_middle_name" type="text" placeholder="Middle Initial/Name" size="15" value="#middle_name#">
<input name="edit_last_name" id="edit_last_name" type="text" required placeholder="Last Name*" value="#last_name#">
<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#">
解决方法
好的，因此运行这段Java脚本似乎会强制创建TABS UI。不是那么优雅，但它可以工作。有更好的方法吗？
<script>
$('tr').on('click',function(){
//console.log("This is a test");
$( "##customer_tabs#customer_id#" ).tabs();
PopulateFileUploadDiv#customer_id#();
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。