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

【问题标题】：Ajax datatable column adding extra button in ASP.NET MVC在 ASP.NET MVC 中添加额外按钮的 Ajax 数据表列
【发布时间】：2018-01-23 10:13:08
【问题描述】：

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

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

<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);
        }
}

【问题讨论】：

标签： jquery ajax asp.net-mvc

【解决方案1】：

如果您希望使用 JQuery 插件 Datatable，则需要在此处购买 datatable 的编辑器许可证：

https://editor.datatables.net/

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

这是一个从 Multi Row editing 的编辑器站点示例中提取的示例，用于设置编辑器本身。请注意，需要的名称与 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: '&gt;', fn: function () { this.submit(); } }
        } );
    } );

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

【讨论】：