🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / C# MVC / jquery datatables ekleme güzel table

1-) C# MVC - jquery datatables ekleme güzel table

 

1-) C# MVC - NUGET'DEN jquery.datatables İNDİR YÜKLE

2-) YÜKLENECEK CSS VE JS LER AŞAĞIDADIR

    <link href="~/Content/DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />

        ...

    <script src="~/scripts/DataTables/jquery.dataTables.min.js"></script>

    <script src="~/scripts/DataTables/dataTables.bootstrap.min.js"></script>

 

3-) yüklerken _Layouta css'i ekle ama .js eklerken aşağıdaki gibi yap

 

  _Layoutun en aşağısına aşağıdakini ekle

...

@RenderSection("scripts", required: false)

</body>

</html>

 

 ilgili .cshtml'de ise aşağıdakini ekle

 

<table class="table table-bordered" id="tblDepartmanlar">

    <thead>

        <tr>

            <th>id</th>

            <th>Ad</th>

            <th>Soyad</th>

            <th>Doğum Tarihi</th>

            <th>Maas</th>

            <th>Cinsiyet</th>

            <th>Sil</th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>@item.id</td>

                <td>@item.ad</td>

                <td>@item.soyad</td>

                <td>@item.dogumTarihi</td>

                <td>@item.maas</td>

                <td>@item.cinsiyet</td>

                @*<td>@Html.ActionLink("Sil", "Sil", new { id = item.id }, new { @class = "btn btn-danger" })</td>*@

 

                @*@using (Html.BeginForm("Sil", "Personel", FormMethod.Post))

                {

                    @Html.AntiForgeryToken()

                    @Html.Hidden("id", null, new { @Value = item.id })

                    <td>

                        <input type="submit" value="Sil" class="btn btn-danger">

                    </td>

                }*@

 

                <td>

                    <input type="submit" value="Sil" class="btn btn-danger btnDepartmanSil" data-id=@item.id>

                </td>

            </tr>

        }

    </tbody>

 

</table>

 

 

@section scripts{

   <script src="~/scripts/DataTables/jquery.dataTables.min.js"></script>

   <script src="~/scripts/DataTables/dataTables.bootstrap.min.js"></script>

 

   <script>

        $('#tblDepartmanlar').DataTable({

            "paging": true,

            "lengthChange": true,

            "searching": true,

            "ordering": true,

            "info": false,

            "autoWidth": false,

            "language": {

                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"

            }

        });

    </script>

 

}

 2021 Ocak 18 Pazartesi
 574