.NetCore using jquerydatatables Sample

*** index chtml

@model IEnumerable<WebCoreIsIstek.Models.tbKullanicilar>

@{

    ViewData["Title"] = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<h1>Index</h1>

<p>

    <a asp-action="Create">Create New</a>

</p>

<hr />

 <link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />

 

<hr />

 

<table id="dataTable" class="table table-striped table-bordered" width="100%">

    <thead>

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.KullanıcıAdı)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.AdıSoyadı)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Emaili)

            </th>

            <th>&nbsp;</th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.KullanıcıAdı)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.AdıSoyadı)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Emaili)

                </td>

                <td>

                    <a class='btn btn-outline-primary' asp-action="Edit" asp-route-id="@item.KullaniciID">Edit</a>

                    <a class='btn btn-outline-danger' onclick="confirmDelete('@Url.Action("Delete", "Home" , new { id=item.KullaniciID })')">-Sil</a>

                </td>

            </tr>

        }

    </tbody>

</table>

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

     <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>

    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>

 

    <script>

        $(document).ready(function () {

            $("#dataTable").dataTable({

                "language": {

                    "url":

                        "lib/datatables/js/Datatables-Turkish.json"

                },

                "searching": true,

                "ordering": true,

                "paging": true,

                "pagingType": "full_numbers",

                "pageLength": 10,

                "responsive": true,

                "columnDefs": [{

                    "targets": 3,

                    "orderable": false

                }]

            });

        });

    </script>

}