Kiến thức

Sử dụng plugin Datatable-Thầy Long Web

Sử dụng plugin Datatable

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/

jquery-plugin

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:

datatables-example

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

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

datatables-example-2

– 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)

datatables-example-3

– 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)

datatables-example-4

– 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

Bạn đang xem: Sử dụng plugin Datatable-Thầy Long Web

Zero configuration

https://datatables.net/examples/basic_init/zero_configuration.html


$(document).ready(function() {
    $('#example').DataTable();
} );

Xem thêm: Kỹ thuật địa chất – Wikipedia tiếng Việt

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" ]]
    } );
} );

Xem thêm: Chuyên đề Cực trị hàm số bậc 3 và Công thức tính nhanh cực trị

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)"
        }
    } );
} );

Xem thêm: TOLUEN (C7H8)_ VCS GROUP

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

Facebook

qt

Chuyên mục: Kiến thức

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Check Also
Close
Back to top button
444 live app 444 live 444 live app 444live kisslive kiss live yy live yylive