无法重新初始化 DataTable 弹出窗口

Question

我对此束手无策。 将数据表模型与列上的一些显示/隐藏功能、排序、分组等合并 制作一个好的报告模板。 一切都很好，除了这个该死的弹出窗口不会消失

DataTables 警告（表 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 个表。但我不知道从哪里开始。老实说，我会满足于该死的弹出窗口消失，但正如我所说，这只会破坏行分组。

抱歉，在 Intranet 后面没有提供链接。搜索了高低的答案，但想不出任何其他方法或在这些脚本中的一个或两个中进行代码修复。

感谢您的帮助。

这里是支持的 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>&nbsp;</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>

Answer 1

有许多不同的方法可以做到这一点。

首先，我注意到您没有使用服务器端，但看起来您切换到它。此示例向您展示如何在请求中设置自定义参数以使用服务器端，与 Scroller 插件配合使用效果很好，但这可能不是必需的或不需要的。

据我了解，您最初在页面加载时加载数据，然后将数据表应用于表。这个例子展示了如何使用服务器端处理（我的偏好是加快页面加载，等待数据量），但我把它注释掉了，仅供参考。

看来您唯一的问题是重新启动数据表...

注意oTable 初始化下方的oSettings 变量。这允许您拥有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 是你添加类名的地方。

希望这会对你有所帮助。