將表更改爲dataTable

我有一個表將使用jQuery動態加載。將表更改爲dataTable

我想將其更改爲DataTable以更好地查看和滾動/分頁。

由於我是新手，我不確定要獲得預期數據的正確過程。

因此，如果有人指導我如何將以下代碼更改爲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>

來源

2017-03-18 kavi

DataTable（）從何而來？ – Monicka

您嘗試使用哪種類型的數據表，服務器端或客戶端？相關的代碼在哪裏？ –

@MayankPandeyz：我正在嘗試用一些表數據動態地填充客戶端表。還有一些也會被用戶編輯。知道該數據表具有更多功能。所以我正在嘗試使用這些 – kavi

您手動創建數據表時，可以做的一切，爲你的表。下面的是未經測試的，但它將如何根據您的代碼進行測試。

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

來源

2017-03-18 17:34:44 Bindrid

將表更改爲dataTable

回答

相關問題