ASP.NET MVC – Sử dụng DataTable

Dưới đây là hướng dẫn cách sử dụng DataTable 

How to Install DataTable

Bước 1 – Thay đổi trong _Layout.cshtml

Mở _layout.cshtml và bổ sung phần sau trong phần

<head>


@RenderSection(“css”, false)

</head>

Trước thẻ </body> bổ sung thêm đoạn mã sau

@RenderSection(“scripts”, required: false)
</body>

Bước 2 – Thêm mã trong index.cshtml

Thiết lập ID cho bảng và class

<table class=”display” id=”table_id”>

<thead>

<tr>

Phần heading của bảng phải để trong <thead>

Phần nội dung hiển thị dữ liệu phải khai báo trong phần <tbody>

<tbody>

@foreach (var item in Model)

{

Bước 3 – Chèn thêm đoạn code sau trong phần view

@section scripts

{

//cdn.datatables.net/1.10.12/js/jquery.dataTables.js

$(document).ready(function () {

$(‘#table_id’).DataTable();

});

}

@section css

{

<link rel=”stylesheet” type=”text/css” href=”//cdn.datatables.net/1.10.12/css/jquery.dataTables.css”>

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s