如何使用Ajax調用來加載jquery數據表，從多個表加載表詳細信息（Master，Detail）

新的仍然是Web技術的學習者。這裏需要指導如何做到這一點的正確方法。爲了解釋我正在尋找的要點，這是一個簡單的模型，它映射到我正在使用的數據庫結構。如何使用Ajax調用來加載jquery數據表，從多個表加載表詳細信息（Master，Detail）

三表單位：公司，員工，EmpDetail

關係：公司1 __ *員工，員工1__1 EmpDetail

所以我的頁面頂部有Company細節，以及屬於該公司的Employees的Datatable。每個員工（錶行）都有一個操作鏈接，用於在引導程序彈出窗口模式或任何種類的對話框中打開FORM，該對話框顯示各個員工的EmpDetails。我可以編輯/更新EmpDetails，並使用ajax.beginForm()將此表單提交回服務器，即僅發佈帶有Ajax的更新的EmpDetails。

所有這一切都已經完成，直到我嘗試使用ajax加載數據表並且困惑了很大的時間。

原因WHY Ajaxing Datatable ??所以，這是因爲我想在Employee DataTable中有一個狀態列，當您更改EmpDetails並提交它時，該列會發生變化。所以我想在用戶在Empdetail中進行更改後每次刷新Datatable。「我希望它有道理」:)，就像我研究過的那樣，你使用AJAX調用來完成數據表的重載/刷新位..所以是的，那就是爲什麼。

所以在通過Ajax調用加載任何東西之前使用ViewModel類很簡單，該類定義了其中的Employees列表。並將所有內容加載到一起。

public class CompanyViewModel 
{ 
    // Some Company table prperties 
    public long Id { get; set; } 
    public string Name { get; set; } 

    public list<Employee> listOfEmployees { get; set; } 
}

現在我想裝載AJAX DataTable中，有鏈接，打開員工詳細信息表，以便它可以編輯每個員工行。

我見過很多線程和方法，但它們隨要求而變化。我不想在這裏進行任何延遲加載。我想讓員工Datatable一次性加載，並讓jquery Datatable插件在客戶端處理分頁，因爲員工列表不是很大。

希望能夠有所幫助，特別是一些寫得很詳細的文章。謝謝，

我正在使用實體框架來管理我的實體。

來源

2017-05-24 AlphaTry

您選中了[this]（https://editor.datatables.net/examples/inline-editing/submitData.html）？您可以將所有要編輯的數據保存在隱藏行中，並通過編輯點擊獲取數據。 – User3250

關於這個話題的文章寫得很好，我就開始here

然後here，有部分3和4你也可以檢查一下，我覺得這個教程幾乎涵蓋所有你想知道的數據表插件的基礎知識

記住，你會發現很多的例子here

如果你已經知道如何使用數據表，但你只是要加載很多數據的foreach行，使用回調，

drawCallback: function (oSettings) { 
    if (oSettings.aiDisplay.length > 0) { 
     for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) { 
      var row = oSettings.aoData[oSettings.aiDisplay[i]]; 
      var rowItem = row.nTr; 
      //Assuming you are loading employee, row._aData will be the current employee object. 
      // this will get his id for example 
      var empid = row._aData.EMPID; 
      var empDetail = row._aData.EmpDetail; 
      //do something with EmpDetail, (maybe add to hidden div), or display in another cell in this row 
      // ex 
      $('td:eq(4)', rowItem).html("some html template + emp detilas");  
     } 
    } 
}

還要注意，如果你的LINQ不與職工加載EMP細節就會拋出一個錯誤，你可以這樣

var empdata = dbcontext.Employees.Include(g => g.EmpDetail).toList();

我希望幫助加載它。

來源

2017-05-25 08:14:15 Munzer

如何使用Ajax調用來加載jquery數據表，從多個表加載表詳細信息（Master，Detail）

回答

相關問題