DataTable 팝업을 다시 초기화 할 수 없습니다.

Question

내 재치가 끝납니다. 열, 정렬, 그룹화 등의 일부 표시/숨기기 기능으로 datatables 모델 병합 좋은 보고서 템플릿을 만들 수 있습니다. 나는 Datables에서 모든 종과 경적을 얻을 수있는 두 개의 스크립트를 합병 할 때

DataTable을 재 초기화 할 수 없습니다 :이 빌어 먹을 팝업 실 거예요 (테이블 ID = '리드') 경고 멀리

DataTables를 이동 제외 모든 위대한 작품 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의 이름, 마지막 스크립트에 의해 이미 사용되는 리드를주고 HADE 다음 스크립트입니다.

여기에 내가 문제가,이 같은 테이블에 호출하고 그 오류의 원인이 무엇인지 알고 있다고 생각 있도록

$(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); 

} 

확인 코드입니다. 쉽게 해결할 수 있습니다. 전화 한 통을 제거 (할 수 없음)하거나 테이블을 종료하십시오.

그래서 행운을 빕니다 같이 리드 테이블의 첫 번째 초기화를 종료하려고하면 행 그룹화 스크립트가 중단됩니다.

$.fn.dataTableExt.sErrMode = 'throw';

또한이

$('#leads').dataTable({ 
    "bServerSide": true, 
    "bDestroy": true 
}); 

도 3의 경우이

$(function leads() { 

    $.fn.dataTableExt.sErrMode = 'mute';  
}); 

는 단순히 RowGrouping 스크립트를 나누기를 시도했다.

나는 대답을 클래스로 만들고 대신 한 번에 2 개의 테이블을 초기화 할 수 있다고 생각한다. 그러나 나는 그것을 어디에서 시작해야할지 모르겠습니다. 솔직히 나는 지긋 지긋한 팝업이 그냥 사라지도록 정착 하겠지만, 내가 말했듯이 그것은 행 그룹화 만 깰뿐입니다.

죄송합니다. 인트라넷 뒤에 링크가 제공됩니다. 답변에 대해 높거나 낮음을 검색했지만이 스크립트 중 하나 또는 둘 모두에서 다른 접근 방식이나 코드 수정을 생각할 수 없습니다.

도움 주셔서 감사합니다. 여기

이 작업을 수행하는 방법에는 여러 가지가 있습니다 지원 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 VAR의 재 시작합니다. 이를 통해 oTable 설정의 인스턴스를 가질 수 있습니다. oTable을 이미 정의 했으므로 $('table#leads').dataTable();에 전화 할 필요가 없습니다.

아래의 코드 샘플을 참조하십시오. 복사/붙여 넣기로 작동할지는 모르겠지만 내가 무엇을보고 있는지 알 수있을 것 같습니다. 클래스에 쉽게 클래스를 적용하는 방법도 설명했습니다. 당신은 그것에 대해 관심이있을 수도 있고 그렇지 않을 수도 있습니다. 그것은 사용 사례에서 귀하의 현재 방법보다 오버 헤드가 적은 것 같습니다.

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은 클래스 이름을 추가하는 곳입니다.

이 정보가 도움이되기를 바랍니다.