jquery datatables actionlink如何添加

前端之家收集整理的这篇文章主要介绍了jquery datatables actionlink如何添加前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在寻找最近几个小时,不幸的是我似乎找不到一个如何用动作编辑填充数据表并使用.net和MVC删除链接列的示例.

以下是我到目前为止,如何添加动作链接?我错过了什么?

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#myDataTable').dataTable({
  4. bProcessing: true,sAjaxSource: '@Url.Action("Index1","Default1")'
  5. });
  6.  
  7. });
  8. </script>
  9.  
  10. <div id="container">
  11. <div id="demo">
  12. <table id="myDataTable">
  13. <thead>
  14. <tr>
  15. <th>
  16. RoleId
  17. </th>
  18. <th>
  19. RoleName
  20. </th>
  21. <th>
  22. UserId
  23. </th>
  24. <th>
  25. UserName
  26. </th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. </tbody>
  31. </table>
  32. </div>
  33. </div>

我想在最后一栏中添加这个;

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

但无法弄清楚该怎么做.

解决方法

您可以使用带有fnRender功能的aoColumns属性添加自定义列.
您不能使用Html.ActionLink助手,因为您必须从javascript动态生成链接. aoColumns属性可以帮助您配置每个列,如果您不想配置特定列,只需传递null,否则您必须传递一个对象({}).

fnRender函数可帮助您使用其他列的值创建链接.您可以使用oObj.aData获取另一列的值(如id)以生成链接.

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $('#myDataTable').dataTable({
  4. bProcessing: true,"Default1")',aoColumns: [
  5. null,// first column (RoleId)
  6. null,// second column (RoleName)
  7. null,// third (UserId)
  8. null,// fourth (UserName)
  9.  
  10. { // fifth column (Edit link)
  11. "sName": "RoleId","bSearchable": false,"bSortable": false,"fnRender": function (oObj)
  12. {
  13. // oObj.aData[0] returns the RoleId
  14. return "<a href='/Edit?id="
  15. + oObj.aData[0] + "'>Edit</a>";
  16. }
  17. },{ },// repeat the samething for the details link
  18.  
  19. { } // repeat the samething for the delete link as well
  20.  
  21. ]
  22. });
  23. });
  24. </script>

从服务器返回的JSON输出中的另一个重要事项,对于编辑列,您还必须返回1,2,3或其他任何内容.

参考:http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

猜你在找的jQuery相关文章