我的智慧结束了。 合并数据表模型与列上的一些显示/隐藏功能，排序，分组等 制作一个好的报告模板。 一切都很好，除了这个该死的弹出窗口不会消失
DataTables警告（table id ='leads'）：无法重新初始化DataTable
当我合并两个脚本以获取Datables和jquery中的所有花里胡哨时，我不得不在额外脚本中更改表的名称，从而导致错误。
这是原始剧本
var oTable;
$(document).ready(function() {
// Convert tables with the class "datatable" into a jquery datatable (sorting, searching, filtering enabled)
oTable = $("table#leads").dataTable( {
"bLengthChange": false,
"bPaginate": false,
"bSort": true,
"bFilter": true,
"bInfo": false,
"bAutoWitdh": true,
"fnInitComplete": function(){
$("table#leads thead tr").each(function(){
$(this).find("th").attr("nowrap","nowrap");
})
$("table#leads tbody tr").each(function(){
$(this).find("td").attr("align","left"); // Centers all columns
$(this).find("td:eq(0)").attr("nowrap", "nowrap").attr("width", "25"); // Adds nowrap attribute to APP ID column
$(this).find("td:eq(1)").attr("nowrap", "nowrap").attr("width", "100"); // Icons & Flags
$(this).find("td:eq(2)").attr("nowrap", "nowrap").attr("width", "50"); // Agent column
$(this).find("td:eq(3)").attr("nowrap", "nowrap").attr("width", "15"); // Team column
//$(this).find("td:eq(4)").attr("nowrap", "nowrap").attr("width", "350"); // Company column
$(this).find("td:eq(5)").attr("nowrap", "nowrap").attr("width", "50"); // Amount column
$(this).find("td:eq(6)").attr("nowrap", "nowrap").attr("width", "75"); // Product column
$(this).find("td:eq(7)").attr("nowrap", "nowrap").attr("width", "50"); // Adds nowrap attribute to STATUS column
$(this).find("td:eq(8)").attr("nowrap", "nowrap").attr("width", "25"); // Div column
$(this).find("td:eq(9)").attr("nowrap", "nowrap").attr("width", "15"); // Channel column
$(this).find("td:eq(11)").attr("nowrap", "nowrap").attr("width", "15").attr("align", "center"); // Funding Coord column
});
}
} ).rowGrouping({iGroupingColumnIndex: 10, iGroupingOrderByColumnIndex: -1});
// Reup filter functionality
// Will filter the table down to the selected
$(".reupFilter").on("change", function(e){
var showFilter = $(e.currentTarget).val();
if(showFilter == 1){
oTable.fnFilter("ReUp");
}else{
oTable.fnFilter("");
}
});
});
function displayComments(leadid){
$("#commentsContainer").load("/forms/partials/_queue_lead_comments.cfm? leadid="+leadid);
$("#commentsContainer").dialog({height: 450, modal: true, title: "Lead Status Messages for "+leadid, width: 650});
}
这里是下一个脚本，我要提供它需要处理的表ID的名称，Leads已经被最后一个脚本使用了。
这是代码
$(document).ready(function() {
$('table#leads').dataTable( {
"sScrollY": "500px",
"bPaginate": true,
"iDisplayLength": 15
} );
} );
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('table#leads').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
好的，所以我想我知道问题是什么，2次调用同一个表并导致该错误。轻松修复，删除1个呼叫（不能）或终止该表。
因此试图终止引线表的第一次初始化，没有运气，只需打破行分组脚本。
$.fn.dataTableExt.sErrMode = 'throw';
也尝试了这个
$('#leads').dataTable({
"bServerSide": true,
"bDestroy": true
});
还有这个
$(function leads () {
$.fn.dataTableExt.sErrMode = 'mute';
});
在所有3种情况下，只需破坏RowGrouping脚本。
我认为答案是让它成为一个类，因此能够一次初始化2个表。但我不知道从哪里开始。老实说，我会满足于该死的弹出窗口，但是就像我说的那样只会打破分组。
对不起，内网后面没有提供的链接。搜索高和低的答案，但是，不能想到任何其他方法或代码修复1或两个脚本。
感谢您的帮助。
这是支持HTML
<h3>Sales Support Pipeline</h3>
<div>
<input type="radio" name="reupFilter" value="1" class="reupFilter">ReUp Only | <input type="radio" name="reupFilter" value="0" checked class="reupFilter"> All
</div>
<div class="row">
<table id="leads" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>APP ID</th>
<th> </th>
<th>Agent</th>
<th>TM</th>
<th>Company</th>
<th>Amount</th>
<th>Product</th>
<th>Status</th>
<th>Div</th>
<th>Channel</th>
<th>VIP</th>
<th>Funding Coord</th>
</tr>
</thead>
<tbody>
<cfoutput query="getleads">
<tr>
<td>
#leadid#
</td>
<td nowrap>
<!--- Qualifier Img --->
<a href="edit_leads.cfm?leadid=#leadid#" target="_blank"><img src="/images/signin_16x16.gif" border="0"/></a>
<a href="../../forms/qualifier.cfm?CFGRIDKEY=#leadid#" target="_blank"><img src="/icons/account_16x16.jpg" border="0"></a>
<a href="actionlead.cfm?CFGRIDKEY=#leadid#" target="_blank"><img src="/icons/interest_16x16.gif" border="0"></a>
<cfif future_type EQ "Expedited">
<img src="/icons/burn.png" width="16" height="16" border="0" title="Marked as Expedited"/>
</cfif>
<cfif len(reup)>
<img src="/icons/reup.png" width="16" height="16" border="0" title="Marked as ReUp" style="display: none;"/>
</cfif>
</td>
<td>#trackid#</td>
<td>#team#</td>
<td>
<strong>#left(dba,50)#</strong>
<div style="font-size: 0.90em;">#left(corp_name,50)#</div>
</td>
<td>#iif(len(cashadv_amount), de(cashadv_amount),de("--"))#</td>
<td>#gbr_product#</td>
<td id="leadAction_#leadid#" class="action" style="cursor: pointer;">
<span title>
<a href="javascript:void(0)" onClick="displayComments(#leadid#)">#application.services.leadService.getLastAction(leadid = getLeads, row = currentrow)#</a>
</span>
</td>
<td>#division#</td>
<td>#apptype#</td>
<td>#regular#</td>
<td>#funding_coord#</td>
</tr>
<cfflush>
</cfoutput>
</tbody>
<br>
<div class="trigger">
<table cellpadding="0" cellspacing="0" width="30%" class="display" >
<tr bgcolor="#DAEFF0">
<td><a href="javascript:void(0);?y=2" onclick="fnShowHide(0);claim(0);" >AppID</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(1);claim(1);" >Icons</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(2);claim(2);" >Agent</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(3);claim(3);" >TM</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(4);claim(4);" >Company</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(5);claim(5);" >Amount</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(6);claim(6);" >Product</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(7);claim(7);" >Status</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(8);claim(8);" >Div</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(9);claim(9);" >Channel</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(10);claim(10);" >VIP</a> </td>
<td> | </td>
<td><a href="javascript:void(0);" onclick="fnShowHide(11);claim(11);" >FC</a> </td>
</tr>
</table>
</div>
</table>
</div>
</div>
答案 0 :(得分：0)
有很多不同的方法可以做到这一点。
首先，我注意到你没有使用服务器端，但看起来你切换到它。此示例显示如何在请求中设置自定义参数以使用服务器端，与Scroller插件配合使用，但可能没有必要或不需要。
根据我的理解，您最初在页面加载时加载数据，然后将数据表应用于表。这个例子展示了如何使用服务器端处理（我的偏好，因为它加快了页面加载，等待数据量），但我把它作为参考注释掉了。
看起来您唯一的问题是重新启动数据表......
请注意oSettings启动以下的oTable var。这允许您拥有oTable设置的实例。您不需要调用$('table#leads').dataTable();，因为您已经定义了oTable。
查看下面的代码示例是否对您有所帮助。我怀疑它可以复制/粘贴，但我认为你可以看到我得到的东西。请注意，我还向您展示了如何轻松地将类应用于列。你可能会或可能不会关心这一点。从我的用例中看，它的开销似乎比你当前的方法要少。
oTable = $("table#leads").dataTable({
"aaSorting": [
[0,'asc']
],
"aoColumns": [
{
"sClass": "nowrap",
"sWidth": "25px"
},
{
"sClass": "nowrap",
"sWidth": "100px"
},
{
"sClass": "nowrap",
"sWidth": "50px"
},
{
"sClass": "nowrap",
"sWidth": "15px"
},
null, // since eq(4) is commented out
{
"sClass": "nowrap",
"sWidth": "50px"
},
{
"sClass": "nowrap",
"sWidth": "75px"
},
{
"sClass": "nowrap",
"sWidth": "50px"
},
{
"sClass": "nowrap",
"sWidth": "25px"
},
{
"sClass": "nowrap",
"sWidth": "15px"
},
null, // since eq(10) wasn't there
{
"sClass": "nowrap center",
"sWidth": "15px"
}
],
"asStripeClasses": [], // removes classes for stripes (can be removed)
"bAutoWidth": true,
"bFilter": true,
"bInfo": false,
"bLengthChange": false,
"bPaginate": false,
"bSort": true,
// "bServerSide": true, // Not sure if you are using this but it seems you do change to it
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax({
url: sSource,
type: "GET",
dataType: "json",
timeout: 0, // prevent timeout
data: aoData,
complete:function() {
// Conditional logic goes here for completion
},
success: function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
}
});
},
"fnServerParams": function ( aoData ) {
// Add parameters to the request
// aoData.push( { "name": "leadid", "value": leadid} ); // uncomment if using server-side
},
// "sAjaxSource": "/forms/partials/_queue_lead_comments.cfm", // notice fnServerParams if using server-side. url is placeholder
"sScrollY": 500
}).rowGrouping({
"iGroupingColumnIndex": 10,
"iGroupingOrderByColumnIndex": -1
});
// Load settings into an easy to access variable
var oSettings = oTable.fnSettings();
// make changes as you see fit
// oSettings.sAjaxSource = "new value";
// oSettings.bPaginate = true;
// oSettings.iDisplayLength = 15;
// Reup filter functionality
// Will filter the table down to the selected
$(".reupFilter").on("change", function(e){
var showFilter = $(this).val();
if(showFilter == 1){
oTable.fnFilter("ReUp");
}else{
oTable.fnFilter("");
}
});
function displayComments(leadid){
$("#commentsContainer").load("/forms/partials/_queue_lead_comments.cfm?leadid="+leadid);
$("#commentsContainer").dialog({height: 450, modal: true, title: "Lead Status Messages for "+leadid, width: 650});
}
function fnShowHide( iCol ) {
/* now we only use the settings object */
var bVis = oSettings.aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
就个人而言，我使用类并将js分配给列。通过向所有列添加类名，可以更轻松地隐藏.className。 aoColumns是您添加班级名称的地方。
希望这会对你有帮助。