不能結合HTML數據表在asp.net與Java腳本

Question

的HTML代碼：

<div class="" style='overflow: scroll; overflow-y: hidden;'> 
    <table id="datatable" class="table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Company Name</th> 
       <th>Customer Type</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Mobile1</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody id="table-list-data"> 
     </tbody> 
    </table> 
</div> 

的Java腳本代碼：

$.ajax({ 
    dataType: "json", 
    type: "POST", 
    url: 'http://localhost:52235/api/AdminPanel/GetCustomer', 
    data: data, 
    async: true, 
    success: function (data) { 
     var trHTML = ''; 

     $.each(data.response.customers, function (i, item) { 

      trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' + 
       '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>'; 
     }); 

     $('#datatable').append(trHTML); 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
    } 
}); 

我越來越喜歡這個，因爲它是顯示輸出數據，但它沒有將數據綁定到數據表，請幫助我們瞭解數據表的綁定情況。

Answer 1

有幾種方式從服務器獲取數據後，使用該工具的工作：
你可以通過每一行和你的自我填充表像你一樣，或者你可以讓數據表爲你做。 我建議你按照這個datatables tutorial。

我建議你按照教程，因爲如果你不會，你將不得不使用數據表api幾乎每一個動作。
例如，你的刪除操作將不得不使用row remove api，只是刪除從DOM行不使用該API將不會更新表，會造​​成錯誤，同時排序/搜索..

這是一個demo with your problem 這是WORKING DEMO

*注意您首先填寫您的表格，然後纔將其轉換爲DataTable。 爲您的代碼，只需添加你要完成的行追加到表後：

$('#datatable tbody').append(trHTML); 
$('#datatable').DataTable(); 

Answer 2

在你的代碼的問題是，你只是附加的HTML行初始化的數據表。

您需要告訴控件綁定數據，例如來自你的控制器。

https://code.msdn.microsoft.com/jQuery-Datatable-With-b4f844e3#content是一個讓你開始的例子。

試一試，這應該適合您的需求。

Answer 3

你嘗試這樣的..

$.ajax({ 
    dataType: "json", 
    type: "POST", 
    url: 'http://localhost:52235/api/AdminPanel/GetCustomer', 
    data: data, 
    async: true, 
    success: function (data) { 
     var trHTML = ''; 

     $.each(data.response.customers, function (i, item) { 

     trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' + '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>'; 
     }); 
     $('#table-list-data').html(trHTML); 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
    } 
});