jquery datatables actionlink cách thêm

Question

Tôi đã tìm kiếm vài giờ qua, và tiếc là tôi không thể tìm thấy một ví dụ về cách điền dữ liệu có thể chỉnh sửa và cột liên kết xóa bằng .net và MVC.

Đây là những gì tôi có cho đến nay, làm cách nào để thêm liên kết hành động? Tôi đang thiếu gì?

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myDataTable').dataTable({ 
     bProcessing: true, 
     sAjaxSource: '@Url.Action("Index1", "Default1")' 
    }); 

}); 
</script> 

<div id="container"> 
<div id="demo"> 
    <table id="myDataTable"> 
     <thead> 
      <tr> 
       <th> 
        RoleId 
       </th> 
       <th> 
        RoleName 
       </th> 
       <th> 
        UserId 
       </th> 
       <th> 
        UserName 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
</table>  
</div> 
</div> 

Tôi muốn thêm điều này vào cột cuối cùng;

<td> 
     @Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) | 
     @Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) | 
     @Html.ActionLink("Delete", "Delete", new { id=item.PrimaryKey }) 
    </td> 

Nhưng không thể tìm ra cách thực hiện.

Answer 1

Bạn có thể sử dụng thuộc tính aoColumns với chức năng fnRender để thêm cột tùy chỉnh. Bạn không thể sử dụng trình trợ giúp Html.ActionLink vì bạn phải tạo liên kết động từ javascript. Thuộc tính aoColumns giúp bạn định cấu hình từng cột, nếu bạn không muốn định cấu hình một cột cụ thể, chỉ cần vượt qua null nếu không, bạn phải chuyển một số object({}).

Chức năng fnRender giúp bạn tạo liên kết bằng các giá trị của các cột khác. Bạn có thể sử dụng oObj.aData để nhận các giá trị của cột khác như id để tạo liên kết.

<script type="text/javascript">  
    $(document).ready(function() { 
     $('#myDataTable').dataTable({ 
      bProcessing: true,   
      sAjaxSource: '@Url.Action("Index1", "Default1")', 
      aoColumns: [ 
         null, // first column (RoleId) 
         null, // second column (RoleName) 
         null, // third (UserId) 
         null, // fourth (UserName) 

         {  // fifth column (Edit link) 
         "sName": "RoleId", 
         "bSearchable": false, 
         "bSortable": false, 
         "fnRender": function (oObj)        
         { 
          // oObj.aData[0] returns the RoleId 
          return "<a href='/Edit?id=" 
           + oObj.aData[0] + "'>Edit</a>"; 
         } 
         }, 

         { }, // repeat the samething for the details link 

         { } // repeat the samething for the delete link as well 

        ] 
    }); 
}); 
</script> 

Điều quan trọng khác trong đầu ra JSON bạn trả về từ máy chủ, cho cột chỉnh sửa, bạn phải trả về 1, 2, 3 hoặc bất kỳ thứ gì.

tham khảo: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

Answer 2

Các fnRender đã được khấu hao và mRender không nhận được các thông số tương tự.

này làm việc cho tôi, hãy làm theo các ví dụ @ Mark:

{  // fifth column (Edit link) 
    "sName": "RoleId", 
    "bSearchable": false, 
    "bSortable": false, 
    "mRender": function (data, type, full) { 
     var id = full[0]; //row id in the first column 
     return "<a href='javascript:alert("+id+");'>Edit</a>"; 
    } 

Answer 3

Một cách tiếp cận với aoColumnDefs

$('#myDataTable').dataTable({ 
    bProcessing: true, 
    sAjaxSource: '@Url.Action("Index1", "Default1")' 
    aoColumnDefs: [{ 
        "aTargets": [4], //Edit column 
        "mData": "RoleId", //Get value from RoleId column, I assumed you used "RoleId" as the name for RoleId in your JSON, in my case, I didn't assigned any name in code behind so i used "mData": "0" 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Edit", "Default1")?RoleId=' + data + 
          '>Edit</a>'; 
        } 
        },{ 
        "aTargets": [5], //Detail column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Detail", "Default1")?RoleId=' + data + 
          '>Detail</a>'; 
        } 
        },{ 
        "aTargets": [6], //Delete column 
        "mData": "RoleId", 
        "mRender": function (data, type, full) { 
         return '<a href=' + 
          '@Url.Action("Delete", "Default1")?RoleId=' + data + 
          '>Delete</a>'; 
        } 
        }] 
}); 

Answer 4

Các phản ứng khác đang sử dụng DataTables di sản cú pháp. Đối với DataTables 1.10+, cú pháp cho columnDefs là như sau:

$('#MyDataTable').DataTable({ 
    "processing": true, 
    "ajax": '@Url.Action("Index1", "Default1")', 
    "columnDefs": [ 
     {"targets": [4], "data": "RoleId", "render" : function(data, type, full) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", data);}}, 
     {}, //repeat 
     {} //repeat 
    ] 
}); 

lưu ý: Để có được mô hình trong ActionLink, Tôi đang sử dụng JavaScript replace() để thay thế chuỗi "thay thế" với data, được định nghĩa như "RoleId" trước đó trong cộtDef

Answer 5

Tôi đã sử dụng mã được đề cập cho dữ liệu 1.10+ nhưng nhận chuỗi trong ô dữ liệu thay vì liên kết.

@Html.ActionLink("Edit", "Edit", new {id = "294"}) 

lưu ý rằng việc sử dụng và cũ phiên bản MVC3 trên giải pháp Đây javascript của tôi:

$(document).ready(function() { 

var tenantid = $('#tenantid').text(); 
$("#title").html("<h1>User List for TenantID: "+ tenantid + " </h1>"); 

var oTable = $('#list').DataTable({ 
    "serverSide": true, 
    "ajax": { 
     "type": "POST", 
     "url": '/User/DataHandler', 
     "contentType": 'application/json; charset=utf-8', 
     'data': function (data) 
     { 
      data.ID = tenantid; 
      return data = JSON.stringify(data); 
     } 
    }, 
    "dom": 'lfrtiSp',   
    "processing": true, 
    "paging": true, 
    "deferRender": true,   
    "pageLength": 10, 
    "lengthMenu": [5, 10, 25, 50, 75, 100], 
    "columnDefs": [ 
     { "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", row.UserID); } } 

    ], 

    "columns": [ 
     { "data": "UserID", "orderable": true }, 
     { "data": "UserGUID", "orderable": false }, 
     { "data": "UserName", "orderable": true }, 
     { "data": "UserEMAil", "orderable": true }, 
     { "data": "UserIsDeleted", "orderable": true }, 
     { "data": "Action", "orderable": false } 
    ], 

    "order": [0, "asc"] 

    }); 
}); 

Answer 6

Tôi tìm thấy một cách để có được ActionLink này hoạt động bằng sự giúp đỡ từ này post (bình luận olivier):

bạn thêm thuộc tính thẻ dữ liệu trong nút bảng mà bạn sử dụng lại trong Javascript

trong cshtml:

<table class="table table-striped display" id="list" 
      data-url-edit="@Url.Action("Edit","User", new { id = "replace"})" 

trong file * .js của bạn trong lĩnh vực ths columndefs:

"columnDefs": [ 
     { 
      "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { 
       return '<a href="' + $('#list').data('url-edit').replace("replace", row.UserID) + '">Edit</a> | ' 
        + '<a href="' + $('#list').data('url-details').replace("replace", row.UserID) + '">Details</a> | '