DataTables jquery 또는 javascript에서 동적으로 추가하는 방법

Question

사이트에서 jQuery DataTable을 사용하고 있지만 다른 하이퍼 링크를 누를 때마다 테이블의 모든 데이터가 변경됩니다. 따라서 행을 삭제하고 하나씩 추가하는 대신 전체 DataTable을 동적으로 제거하고 배열이있는 모든 데이터로 다른 행을 다시 만드는 방법이 있습니까?

여기에있는 코드는 오래된 정적 인 것들을 계획하고 있지만 동적으로 배열을 가져 오는 방법을 알고 있습니다. 배열을 파이썬/cherryPy에서 다시 가져올 때 이렇게 보일 것입니다 : ar [n] = [ "col1" "COL2 ','COL3", "col4"... "coln"]

아래 코드 (정적)을 HTML에서의 DataTable을 생성하는 정적 코드 ...

<div id="div1" class="ctnr"> 
    <table id="mainTable1" class="dtable" cellpadding="3" cellspacing="1" border="0"> 
    <thead> 
     <tr><th>*</th><th>Proposal</th><th>Vote </th><th> For </th><th>dd</th><th>A</th></tr> 
    </thead> 
    <tbody id="tbdy"> 
     <tr id="zrow1" class="gradeX"><td><input id="ckb1" type="checkbox" class = "tb" /></td><td id="ppl1" class="ppsal" style="width:55%">BlaBlaBla</td><td>More BlaBlaBla</td><td class="ralign"> CheeCheeChee</td><td class="ralign"> ChooChoo...</td><td class="ralign"> LaLaLa</td></tr> 
    </tbody> 
    </table> 
</div> 

JavaScript 또는 jQuery에서 어떻게 처리 할 수 ​​있습니까?

데니스

Answer 1

DataTables는 프로그래밍 그들이 "data sources"라고 부릅니다 사용하여 테이블의 구조와 데이터를 정의 할 수 있습니다.

설명서에 몇 가지 예가 나와 있습니다. 나는 사람이 당신을 맞게되는 모르겠지만 여기 시작하는 몇 가지 :

• DataTables dynamic creation example
  는
• DataTables AJAX source example이 (AJAX를 통해 JS 배열을 사용)

(A JS 배열을 사용)

<table> 태그를 다시 만들지 않으려면 the bDestroy() method과 결합하면됩니다.

다른 접근법은 테이블을 다시 만들지 않고 행을 다시 설정하는 것입니다. 내가 아는 setData() 메서드는 없지만 동일한 결과를 얻으려면 fnClearTable() 및 fnAddData() 메서드를 사용할 수 있습니다. DataTables API docs에서 이러한 방법에 대해 자세히 알아볼 수 있습니다.

Answer 2

안녕하세요에 기초 ..

가 나는 laravel 컨트롤러 ... 루프 동적 테이블을 생성이 함수 있었다 ... 나 ... 같은 문제가 있었고, 그것을 해결하는 방법이 있었다 $ APP_ID 변수 ... 그리고 런타임 ...의 행의 데이터 테이블을 추가했다 ...

public function getAppUserProfile(Request $request){ 
    $app_id = $request['appId']; 
    $configs = Userconfig::with('user')->where('config_id', $app_id)->get(); 
    $ct = 1; 
    $str = ''; 
    foreach($configs as $config){ 

      // $config->user->id, 
      $str .= '<tr><td>'. $ct.'</td><td>'. 
        $config->user->profile->first_name 
       .'</td><td>'. 
        $config->user->profile->first_name 
       .'</td><td>'. 
        $config->user->profile->first_name 
       .'</td></tr>'; 

      $ct++; 
    } 

    $tb = '<table id="testTable2" class="table table-striped table-bordered"><thead>'; 
    $tb .= '<tr><th>S/N</th><th>USER NAME</th><th>ASSIGN ROLE</th><th>Add</th></tr>'; 
    $tb .= '</thead><tbody>' . $str . '</tbody></table>'; 


    //return json_encode($configs); 

} 

는 $ STR 함수 나 테이블에 무엇 에코 구성된 테이블 데이터를 보유 ...되고 자바 스크립트 파일에서 수행되는 ID "panel_data_tb"가있는 div 태그에 페이지를 직접 입력하십시오.

function showAppUser() { 
    $('.loading').css('display', 'block'); 
    var appID = $('#app_search').val(); 
    $.ajax({ 
     method: 'get', 
     url: getauprofile, 
     data: {appId: appID} 
    }) 
     .done(function (result) { 
      // alert('success ' + result); 
      $('#panel_data_tb').html(result); 
      $('.loading').css('display', 'none'); 


      //this line here is what initializes the datatable on the 
      //current table just being created... 
      //dynamically.. and it worked. perfectly for me.. 
      //****************************************************** 

      $('#panel_data_tb').find('table').DataTable(); 

      //******************************************************* 


     }); 

} 

마지막 줄 ..은 Div 태그 내의 테이블을 찾아 동적으로 datatable() 속성을 초기화합니다. 언제든지 테이블 내용을 변경할 때 생성되는 동적 테이블에서 데이터 테이블이 다시 초기화됩니다.

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