如何從服務器JSON中使用Datatables行詳細信息？

Question

我有一個表，我認爲項目ASP MVC

@foreach (var items in Model) 
     { 
      <tr> 
       <th> 
        <input type="button" value="Assign" onclick="AssignButtonClicked(this)" 
          data-assigned-id="@items.ADUsersId" /> 
       </th> 
       <th>@Html.DisplayFor(modelItem => items.DisplayName)</th> 
       <th>@Html.DisplayFor(modelItem => items.Company)</th> 
       <th>@Html.DisplayFor(modelItem => items.Department)</th> 
       <th>@Html.DisplayFor(modelItem => items.TelephoneNumber)</th> 

      </tr> 
     } 

在第一篇文章我通過標識的功能JS

function AssignButtonClicked(elem) { 
      var id = $(elem).data('assigned-id'); 
      $.ajax({ 
       url: '@Url.Action("Details", "Users")', 
       type: 'post', 
       //cache: false, 
       //async: true, 
       //data: { id: id } 
       data: { id:id }, // OR data: {id:1} => nothing work 
       dataType: "json", 
       success: function (data) { 
        alert(JSON.stringify(data)); 
       }, 
       error: function (xhr) { 
        alert('error'); 
       } 
      }) 
      }; 

一切運作良好，我得到的JSON數據

現在，我如何使用Json數據在Datatable中生成詳細信息行？ Here Example

Answer 1

您可以使用jQuery的一點點顯示record.Here的一個完整的例子的細節，希望它可以幫助你：

控制器：

public class UsersController : Controller 
{ 
    public ActionResult Index() 
    { 
     var u1 = new User { ADUsersId = 1, DisplayName = "User 1", Company = "Company 1" }; 
     var u2 = new User { ADUsersId = 2, DisplayName = "User 2", Company = "Company 2" }; 
     var u3 = new User { ADUsersId = 3, DisplayName = "User 3", Company = "Company 3" }; 

     var users = new List<User> { u1, u2, u3 }; 

     return View(users); 
    } 

    [HttpPost] 
    public JsonResult Details(int id) 
    { 
     //Write your query to fetch the details of the user(mine is hardcoded for simplicity) 
     return Json(new {UserSurname="Surname " + id,UserNickName="Nickname " + id }, JsonRequestBehavior.AllowGet); 
    } 
} 

public class User 
{ 
    public int ADUsersId { get; set; } 
    public string DisplayName { get; set; } 
    public string Company { get; set; } 
} 

查看：

@model IEnumerable<WebApplication7.Controllers.User> 

@{ 
    ViewBag.Title = "Index"; 
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<style type="text/css"> 
    .detail{ 
     border: 2px solid red; 
    } 
</style> 
<script type="text/javascript"> 

    $('body').on('click', 'tr.detail', function() { 
     if(confirm("Are you sure you want to close the detail record?")) 
     { 
      $(this).remove(); 
     } 
    }); 

    function RemoveDetail(){ 
     $('.table tr').each(function() { 
      var tr = $(this); 
      var isDetail = $(tr).hasClass("detail"); 
      if (isDetail) 
       $(tr).remove(); 
     }); 
    } 

    function AssignButtonClicked(elem) { 
     var id = $(elem).data('assigned-id'); 
     $.ajax({ 
      url: '@Url.Action("Details", "Users")', 
      type: 'post', 
      data: { id: id }, 
      dataType: "json", 
      success: function (data) { 
       debugger; 
       alert(JSON.stringify(data)); 

       RemoveDetail(); 

       var detailRow = "<tr class='detail'><td colspan='3'>Surname - " + data.UserSurname + "<br />Nickanme - " + data.UserNickName + "</td></tr>" 
       var currentRow = $(elem).parent().parent(); 
       $(detailRow).insertAfter(currentRow);  
      }, 
      error: function (xhr) { 
       alert('error'); 
      } 
     }); 
    }; 
</script> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.DisplayName) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Company) 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.DisplayName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Company) 
     </td> 
     <td> 
      <input type="button" value="Assign" onclick="AssignButtonClicked(this)" data-assigned-id="@item.ADUsersId" /> 
     </td> 
    </tr> 
} 
</table> 

輸出：