I am trying to add buttons for edit or delete on a jQuery DataTable.
Here is my View file below:
@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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/u/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-html5-1.2.0,b-print-1.2.0/datatables.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>
}
And below I have added the code from my Controller
public ActionResult Categories()
{
var data = _uow.Categories.GettAll();
// return Json( new {data= model } ,JsonRequestBehavior.AllowGet);
return View(data);
}
In my view I am also showing the scripts section with the DataTable initialization. It works fine, but if I try to add buttons for update and delete, jQuery DataTable does not accept it and appears like a regular table.