How to apply jQuery datatable in Entity Framework?

Question

I have tried to use jQuery datatable in Entity Framework.

This is my code:

  @model IEnumerable< MvcApplication6.Models.Student>

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

    <h2>Index</h2>



   <!DOCTYPE html>

   <html>
   <head>
   <script type="text/javascript" charset="utf8" 
    src="https://code.jquery.com/jquery-1.12.4.js"></script>


     <link rel="stylesheet"  type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css" />
      <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>




</head>
<body>
    @Html.ActionLink("Create New","create")
    <table id="tbl" class="table table-striped table-bordered" >
    <thead>

         <tr> 
             <th>
                 @Html.DisplayNameFor(model=>model.StudentId)
             </th>

             <th>
                 @Html.DisplayNameFor(model=>model.FirstName)
             </th>
              <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Batch)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Class)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.School)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Domicile)
        </th>
              <th>
          Actions
        </th>
         </tr>

    </thead>
    <tbody>
        @foreach(var item in Model)
        {

            <tr>
                 <td>@Html.DisplayFor(model=>item.StudentId)</td>

                <td>@Html.DisplayFor(model=>item.FirstName)</td>
                  <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Batch)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Class)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.School)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Domicile)
        </td>
                <td>
                     @Html.ActionLink("Edit", "edit", new  { id=item.id})|
                     @Html.ActionLink("Details", "details", new  { id=item.id})|
                     @Html.ActionLink("Delete", "delete",new  { id=item.id},new { onclick="return confirm('Are you sure?');"})
                </td>
            </tr>
        }

    </tbody>

</table>


</body>
</html>



<script type="text/javascript" >
 //jQuery.noConflict();
    $(document).ready(function ()
    {

        $("#tbl").DataTable();
    });
    $(document).ready(function () {



    })
</script>

jQuery datatable is not applied. I have used razor engine with Entity Framework. I have tried in aspx engine with ado.net, there the jQuery datatable worked properly.

Answer 1

change your datatable links to https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js and https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css CDNs.

The "~/" in your link and script are used server side to resolve the URL. Script and link tags are client side so it will not work.

How to apply jQuery datatable in Entity Framework?

Question

1 answers

solution1
0 2017-04-14 03:11:32

How to apply jQuery datatable in Entity Framework?

Question

1 answers

solution1 0 2017-04-14 03:11:32

solution1
0 2017-04-14 03:11:32