テーブルをdataTableに変更します

Question

私はテーブルを動的にjQueryを使用してロードします。

私はより良いビューのためのDataTableにこれを変更し、/改ページをスクロールしたいと思います。

私は新しいので、予想されるデータを取得する正しい手順についてはわかりません。

だから、ずっと誰かがデータテーブルに私の下のコードを変更する方法についての私を案内しても/ページ付けのヒントをスクロールする場合いただければ幸いです。

そしてまた、主要な疑問は、私たちがのDataTableに、ユーザ編集可能なテーブルをマッピングすることができるかどうか、ですか？

//get item list from erp tables 
 
$.post('geterpitem', { 
 
    grn: $('#num').val() 
 
}, function(responseJson) { 
 
    if (responseJson.length != null) { 
 
     var $tbl = $("#itemtable"); 
 
     $tbody = $tbl.find('tbody'); 
 
     $tbl.find("tr:gt(0)").remove(); 
 
     var i = 1; 
 
     $.each(responseJson, function(key, value) { 
 
      var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
 
      rowNew.children().eq(0).append(i); 
 
      rowNew.children().eq(1).text(value['itemcode']); 
 
      rowNew.children().eq(2).text(value['itemname']); 
 
      rowNew.children().eq(3).text(value['receivedqty']); 
 
      rowNew.children().eq(4).html('<input type="text" id="inspdate"/>'); 
 
      rowNew.children().eq(5).html('<input type="text" id="accep" onkeypress="return isNumber(event)"/>'); 
 
      rowNew.children().eq(6).html('<input type="text" id="rejec"/>'); 
 
      rowNew.children().eq(7).html('<input type="text" id="rema"/>'); 
 
      rowNew.appendTo($tbody); 
 
      i++; 
 
     }); 
 
    } else { 
 
     alert("No item found!!"); 
 
    } 
 
}); 
 
$(document).ready(function() { 
 
    $('#itemtable').DataTable() 
 
});

<table border="1px" cellpadding="0" cellspacing="0" class="display" id="itemtable"> 
 
    <thead> 
 
     <tr> 
 
      <th>SLno</th> 
 
      <th>Item code</th> 
 
      <th>Item name</th> 
 
      <th>Received qty</th> 
 
      <th>Insp Date</th> 
 
      <th>Accepted qty</th> 
 
      <th>Rejected qty</th> 
 
      <th>Remarks</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 1

のDataTableがあなたのためにすべてのことを行うことができたときに、手動でテーブルを作成しています。下の はテストされていませんが、私はあなたのコードに基づいてそれをやります。

$(document).ready(function() { 
     $.post('geterpitem', { 
      grn: $('#num').val() 
     }, function (responseJson) { 
      if (responseJson.length != null) { 
       defineTable(responseJson); 
      } else { 
       $('#itemtable').DataTable(); 
       alert("No item found!!"); 
      } 
     }); 
    }); 
    function defineTable(jsonData){ 
     var lineNum = 1; 
     $('#itemtable').DataTable({ 
      data: jsonData, 
      columnDefs:[{ targets: [4,5,6,7], render: function() { return "<input type='text' />";} }], 
      columns: [ 
       { data: function() {return lineNum++;}}, 
       { data: "itemcode" }, 
       { data: "itemname" }, 
       { data: "receivedqty" }, 
       { data: null }, 
       { data: null, className:"aNumber" }, 
       { data: null }, 
       { data: null }, 
       ] 
     }); 
     $('#itemtable .aNumber').on("keypress", "input", function (evt) { isNumber(evt);}) 
    }