0

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.

Asmaa Mohamed
  • 113
  • 1
  • 10

0 Answers0