Hướng dẫn sử dụng DataTables

Các bước dưới đây hướng dẫn cách sử dụng DataTables pluggin

  1. _Lauout.cshtml

Chèn đoạn code sau vào phần

<head>
….
<link href=”https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css&#8221; rel=”stylesheet” />
</head>

Chép đoạn code sau trước thẻ đóng </form>

src

2. Trong trang index.cshtml hoặc trang bất kỳ dùng bảng

1) Chỉnh sửa lại id của bảng và class như sau

<table class=”display” id=”mytable”>
<thead>
<tr>
<th>

//Những phần highlight là những nội dung thay đổi và bổ sung
2) Trước vòng lặp để hiển thị dữ liệu cho bảng, bổ sung thêm thẻ <tbody>
<tbody>
@foreach (var item in Model)
{

….

}
</tbody>

3) Chèn thêm đoạn mã sau vào cuối trang Index.cshtml hoặc trang sử dụng bảng bất kỳ
@section scripts
{
    $(document).ready(function () {
        $(‘#mytable’).DataTable();
    });
}

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