jquery UI 대화 상자에 datatables 적용

Question

나는 datatables와 함께 jqueryui 대화 상자를 사용하는 페이지가 있습니다. 버튼을 클릭하면 대화 상자가 열리고 표 내용이 표시됩니다. 데이터 테이블이 없으면 대화 상자가 예상대로 수행됩니다. 그러나 datatables 테이블에 적용 할 때 예상 된 결과를 얻을 수 없습니다. 그래서 내 질문은,이 일을하는 가장 좋은 방법은 무엇입니까?

대화 HTML :

<div id="customerDialog"> 
    <input type="button" id="selectCustomer" name="selectCustomer" value="Select" /> 
    <table id="custTable"> 
    <thead> 
     <tr> 
     <th>Id</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Email</th> 
     <th>Mobile</th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr> 
     <td><input type="radio" id="custId" name="custId" value="0" /></td> 
     <td>x</td> 
     <td>ye</td> 
     <td>z@x.y</td> 
     <td>000000000</td> 
     </tr> 
     <tr> 
     <td><input type="radio" id="custId" name="custId" value="1" /></td> 
     <td>x</td> 
     <td>ye</td> 
     <td>z@x.y</td> 
     <td>000000000</td> 
     </tr> 
     <tr> 
     <td><input type="radio" id="custId" name="custId" value="2" /></td> 
     <td>x</td> 
     <td>ye</td> 
     <td>z@x.y</td> 
     <td>000000000</td> 
     </tr> 
     <tr> 
     <td><input type="radio" id="custId" name="custId" value="3" /></td> 
     <td>x</td> 
     <td>ye</td> 
     <td>z@x.y</td> 
     <td>000000000</td> 
     </tr> 
     <tr> 
     <td><input type="radio" id="custId" name="custId" value="4" /></td> 
     <td>x</td> 
     <td>ye</td> 
     <td>z@x.y</td> 
     <td>000000000</td> 
     </tr> 

    </tbody> 
    </table> 
</div> 

내 jQuery 코드 :

$(document).ready(function() { 
    $('#customerDialog').dialog({ 
     autoOpen: false, 
     title: "Customers", 
     show: "blind", 
     hide: "explode", 
     modal: true, 
     width: 500 
    }); 

    $('#custTable').dataTable({ 
     bJQueryUI: true 
    }); 

    $('#selectCustomer').click(function() { 
     var target = $(this); 
     $('#customerDialog').dialog("open"); 
     $('#customerDialog').dialog("widget").position({ 
      my: 'left top', 
      at: 'left bottom', 
      of: target 
     }); 
    }); 
}); 

Answer 1

영업의 코드가 정확하고 실제로는 작동합니다.

해결 방법 : 자바 스크립트를 많이 사용와 마찬가지로

$('#customerDialog').dialog({ 
    autoOpen: false, 
    title: "Customers", 
    show: "blind", 
    hide: "explode", 
    modal: true, 
    width: 500 
}); 

$('#custTable').dataTable({ 
    bJQueryUI: true 
}); 

$('#selectCustomer').click(function() { 
    var target = $(this); 
    $('#customerDialog').dialog("open"); 
    $('#customerDialog').dialog("widget").position({ 
     my: 'left top', 
     at: 'left bottom', 
     of: target 
    }); 
}); 

Answer 2

http://jsfiddle.net/nicolapeluchetti/CuvkR/ 내가 같은 기술을 사용합니다. 이 경우 일반적인 문제를 설명하는 경우 플러그인 (데이터 테이블)을 초기화 할 때 DOM 요소가 존재하지 않는다는 것입니다.

AJAX 호출을 통해 대화 상자의 내용을로드하고 있습니까? 그렇게 보이지는 않지만 코드를 단순화 할 수 있습니다.

그래서, 당신은 '이 예에서이

$(document).trigger('datatable_loaded'); 

을 당신의 준비() 함수

$(document).on('datatable_loaded', function() { 
     $('#custTable').dataTable({ 
      bJQueryUI: true 
     }); 
    }); 

내부 및 AJAX 성공 콜백이 같은 사용자 정의 이벤트를 사용해야하는 경우 datatable_loaded '는 당신이 던져서 붙잡는 임의의 문자열입니다. 대화 내용을로드하는 데 AJAX를 사용하지 않는 경우이 방법은 오류가 다른 곳에서 발생하기 때문에 도움이되지 않습니다.