Menggunakan jQuery DataTable dengan MVC

DataTable adalah pug-in jQuery untuk membuat tabel HTML menjadi lebih mudah. DataTable menyediakan fitur seperti searching, sorting dan pagination tanpa harus melakukan konfigurasi apapun. Datatable juga dapat menampilkan data dari berbagai sumber data seperti XML, JSON, Array, CSV atauTSV.
Pada artikel ini kita akan membuat DataTable dengan JSON data source dengan menggunakan AJAX, tentunya dengan server-side data processing karena kita menggunakan MVC. Nah agar menjadi lebih mudah saya sudah meng-upload library ke nuget.org untuk membantu pemrosesan data di server. Kalian tinggal masuk menu Tools>  Nuget Package Manager> Manage Nuget Packages for Solution lalu install jQueryDataTable.DynamicLinq.

Setelah itu tambahkan script berikut ke dalam _Layout.cshtml.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
Atau lebih lengkapnya seperti berikut:
_Layout.cshtml.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - WebApplication1</p>
        </footer>
    </div>

    <environment names="Development">
        @*<script src="~/lib/jquery/dist/jquery.js"></script>*@
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("scripts", required: false)
</body>
</html>
Buat Controller dan View baru, kemudian masukan script berikut ke dalam View Kalian.

@{
    ViewBag.Title = "Data Employee";
}
<h2>Data Employee</h2>
<div class="row">
    <div class="col-md-12">
        <table id="myTable" class="table table-striped table-bordered" cellspacing="0">
            <thead>
                <tr>
                    <th>ID  </th>
                    <th>NAME</th>
                    <th>ADDRESS</th>
                    <th>GENDER</th>
                </tr>
            </thead>

         </table>
    </div>
</div>
<script>
    $(document).ready(function () {

        var table = $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "filter": true,
            "orderMulti": false,
            "ajax": {
                "url": "/Employee/GetData",
                "type": "POST",
                "datatype": "json"
            },
            "columns" : [
                    { "data": "id", "autoWidth": true },
                    { "data": "name", "autoWidth": true },
                    { "data": "address", "autoWidth": true },
                    { "data": "gender", "autoWidth": true }
            ]
        });

     });

  </script>
Script Untuk Controller.
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using WebApplication1.Models;
using jQueryDataTable.DynamicLinq;

 namespace WebApplication1.Controllers
{
    public class EmployeeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult GetData(jQueryDataRequest param)
        {
            DataContext context = new DataContext();
            var data = context.employee.Select(x=> new { x.id, x.name, x.address, x.gender});
            return Json(data.ToJQueryDataSource(param));
        }
    }
}

 Jika sudah selesai coba running dan hasilnya akan seperti berikut.


NOTE:
Pada artikel ini saya membuat project dengan ASP .NET Core, tapi sebenarnya kalian bisa membuatnya dengan ASP .NET MVC project dengan .NET Framework versi 4.0 keatas.




Comments

Post a Comment

Popular Posts