DataTables의 편집기를 사용하고 아약스의 데이터를 호출하는 방법

Question

테이블을 만드는 데 필요한 많은 정보가 담긴 데이터베이스가 있습니다. 내가 할 수 있기를 원하는 것은 ajax 호출을 통해 데이터를로드 한 다음 테이블의 데이터를 편집 할 수 있어야한다는 것입니다. 하지만 데이터가 페이지에 표시되도록 할 수는 없습니다. 다른 인터페이스에서 DataTables를 사용하고 있으며 로딩, 정렬 및 기타 멋진 기능이 작동합니다. 나는 전에 Editor를 사용하지 않았고 약간 혼란 스럽다.

function drawDataTable(){ 
    var len = allocationData.length; 
    html = "<div id='dataTableDiv'><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></tr></thead><tbody>"; 
    for (i=0;i<len;i++){ 
    html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>"; 

    } 
    html += "</tbody></table></div>"; 

    $(".table-responsive").html(html); 
} 

$(function(){ 
    editor = new $.fn.dataTable.Editor({ 
    "ajax": "qry/dataTable.php", 
    "table": "#dataTable", 
    "fields":[{ 
     "name": "SystemName" 
    },{ 
     "name": "Gatherer" 
    },{ 
     "name": "Operator" 
    },{ 
     "name": "County" 
    },{ 
     "name": "SampleDate" 
    },{ 
     "name": "DailyAvg" 
    }] 
}); 

$('#dataTable').DataTable({ 
    dom: "Bfrtip", 
    ajax: { 
     type: "POST", 
     url: "qry/dataTable.php", 
     success: function(){ 
      drawDataTable(); 
     } 
    }, 
    serverSide: true, 
    columns: [ 
     {data: "SystemName"}, 
     {data: "Gatherer"}, 
     {data: "Operator"}, 
     {data: "County"}, 
     {data: "SampleDate"}, 
     {data: "DailyAvg"} 
    ], 
    select: true, 
    buttons: [ 
     { extend: "create", editor: editor }, 
     { extend: "edit", editor: editor }, 
     { extend: "remove", editor: editor } 
    ] 
    }); 
}); 

Answer 1

성공 : 편집 기능을 사용해보세요. 이것이 도움이되는지 확인하십시오.

 success: function(result){ 
      allocationData = JSON.parse(result); 
      drawDataTable(); 
     }