Lập trình Jquery

Sử dụng plugin Datatable

29/03/2020

DataTables là một jquery plugin tuyệt vời. Nó được viết trên nền Jquery để giúp quản lý dữ liệu dạng table trong trang web thật dễ dàng. DataTables có nhiều đặc điểm nổi bật sau:

Phân trang, search tức thì, sắp xếp nhiều cột dữ liệu
Hỗ trợ nhiều data source: DOM, Javascript, Ajax và các xử lý trên máy chủ
Tương thích với: jQuery UI, Bootstrap
Có rất nhiều các tính năng được mở rộng:

Website plugin datatables:

https://datatables.net/

Nhúng plugin DataTables

a. Nhúng jquery:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

b. Nhúng datatable css:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

c. Nhúng datatable js:

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

d. Code khởi tạo datatable

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

#example: cách chọn table, có thể chỉnh cho phù hợp
“order”: [[ 3, “desc” ]] : Cấu hình cho datatable, có thể bổ sung, thêm bớt rất nhiều thông số

Sử dụng Datatables

B1. Vào https://datatables.net/examples/

B2: Nhắp các mẫu ví dụ như trong hình dưới để xem các code mẫu demo:

B3: Lấy code html, css, js vào trang để dùng:

– Nhắp tab HTML để lấy code paste vào trang

– Nhắp tab CSS sẽ thấy địa chỉ file css, sử dụng link đang hiện để nhúng css vào trang (nếu chưa nhúng)

– Nhắp tab Javascript sẽ thấy các liên kết javascript, sử dụng link hiện ra để nhúng javascript vào trang (nếu chưa nhúng)

– Gõ tag <script> </script> rồi copy code khởi tạo datatable (xem hình trên) rồi Paste vào trong tag script mới gõ

Các cấu hình thường dùng

Zero configuration

https://datatables.net/examples/basic_init/zero_configuration.html
 $(document).ready(function() {
    $('#example').DataTable();
} );

Feature enable / disable

https://datatables.net/examples/basic_init/filter_only.html
 $(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

Default ordering (sorting)

https://datatables.net/examples/basic_init/table_sorting.html
 $(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

Page length options

https://datatables.net/examples/advanced_init/length_menu.html
 $(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

Language options

https://datatables.net/examples/basic_init/language.html
 $(document).ready(function() {
    $('#example').DataTable( {
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Nothing found - sorry",
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        }
    } );
} );

Setting defaults

https://datatables.net/examples/advanced_init/defaults.html
 $.extend( true, $.fn.dataTable.defaults, {
    "searching": false,
    "ordering": false
} );
$(document).ready(function() {
    $('#example').DataTable();
} );

Ajax sourced data

https://datatables.net/examples/data_sources/ajax.html
 $(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

Quiz

https://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery