Question

我正在使用ajax datatable加载数据，但我希望在每一行中都有一些按钮编辑和细节。我试过但失败了。我们将非常感谢您的帮助。

这是我的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

如果您希望使用插件Datatable for JQuery，那么您需要为此处的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以处理实际的查看逻辑。

Ajax datatable列在ASP.NET MVC中添加额外按钮

1 个答案: