Ajax 数据表列在 MVC 中添加 ASP.NET 额外的按钮

Question

我正在使用ajax数据表加载数据，但我想在每一行中进行一些按钮编辑和详细信息。我试过但失败了。您的帮助将不胜感激。

这是我的 cshtml 标记，我在 Ajax 数据表中使用表和数据加载：

<div class="row">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <table id="myTable">
            <thead>
                <tr>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>Joing Date</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script>
$(document).ready(function() {
  $('#myTable').DataTable({
    "ajax": {
      "url": "/Employee/loaddata",
      "type": "GET",
      "datatype": "json"
    },
    "responsive": true,

    "columns": [{
        "data": "FirstName",
        "autoWidth": true
      },
      {
        "data": "LastName",
        "autoWidth": true
      },
      {
        "data": "JoiningDate",
        "autoWidth": true
      }
    ]
  });
});
</script>

下面是控制器代码：

public class EmployeeController : Controller
{
        private EmployeeContext db = new EmployeeContext();
        public ActionResult loaddata()
        {
            db.Configuration.LazyLoadingEnabled = false;
            var clientes = db.Employees.OrderBy(a => a.FirstName).ToList();
            return Json(new { data = clientes }, JsonRequestBehavior.AllowGet);
        }
}

Answer 1

如果你想使用 JQuery 的插件 Datatable，那么你需要在这里购买编辑器的许可证datatable：

https://editor.datatables.net/

然后，您需要使用 $.fn.dataTable.Editor 实例化一个新的编辑器对象，然后告诉编辑器实例哪些列需要在运行时编辑。

下面是一个示例，取自编辑器站点示例，用于设置编辑器本身的多行编辑。请注意，所需的名称与DataTable本身的列名称匹配，您需要更改ajax:设置以指向POST操作方法。

var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Joining Date:",
                name: "JoiningDate"
            }
    } );

然后，您需要定义要使用内联编辑：

  // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            buttons: { label: '>', fn: function () { this.submit(); } }
        } );
    } );

您仍然需要保留DataTable来处理实际的查看逻辑。