尝试添加按钮时,JQuery DataTable无法正常工作

时间:2016-12-20 14:03:30

标签: jquery datatables

我正在尝试在jQuery DataTable上添加用于编辑或删除的按钮。

以下是我的查看文件:

@model   IEnumerable<E_Commerce.Domain.Entities.Models.Category>

@{
 ViewBag.Title = "Categories";
 Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/Table.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet" />

<div class="page-content">
<div class="header">
    <h2>Categories</h2>
</div>
<div class="row">
    <div class="col-lg-10 ">
        <div class="panel">
            <div class="panel-header ">

                <h2>Add New Category</h2>
            </div>
            <div class="panel-content">

                <div class="row">
                    <div class="col-md-10">
                        <table class="table table-hover table-dynamic dataTable no-footer" id="tblCategory" role="grid" aria-describedby="DataTables_Table_0_info">
                            <thead>
                                <tr>
                                    <th> Name</th>
                                    <th> Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model)
                                {
                                    <tr>
                                        <td>@item.Name</td>
                                        <td>@item.Description</td>
                                     @*<td><a class="edit btn btn-sm btn-default" href="javascript:;"><i class="icon-note"></i></a></td>*@  
                                        @*<td>@Html.ActionLink("E", "UpdateCategory", new { id = @item.Id }, new { @class = "btn btn-success" })
                                        <td>@Html.ActionLink("D", "DeleteCategory", new { id = @item.Id }, new { @class = "btn btn-danger" })</td>*@

                                    </tr>
                                }
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 @section Scripts
 {
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/table.js"></script>
@Scripts.Render("~/bundles/dataTables")

<script>
$(document).ready(function () {
$('#tblCategory').DataTable({
    "processing":true,
   // "serverSide":true
  //"ajax": "localhost:30913/Category/Categories",
  //  "columns": [
  //             { "data": "Name" },
  //             { "data": "Description" }
  //  ]
}).makeEditable();

 })
</script>
}

下面我添加了控制器中的代码

    public ActionResult Categories()
    {
        var data = _uow.Categories.GettAll();
        //  return Json( new {data= model } ,JsonRequestBehavior.AllowGet);
       return View(data);
    }

在我看来,我也在使用DataTable初始化显示脚本部分。它工作正常,但如果我尝试添加更新和删除按钮,jQuery DataTable不接受它并显示为常规表。

0 个答案:

没有答案