× Lưu ý: Xem hướng dẫn trên các bảng Bootstrap để tìm hiểu cách tùy chỉnh bố cục này hơn nữa. & NBSP; Bootstrap 3 phiên bản của đoạn này có sẵn ở đây.Note: See the tutorial on Bootstrap Tables to learn how to customize this layout further. Bootstrap 3 version of this snippet is
available here. Đoạn trích tương tự Bảng dữ liệu với hộp tìm kiếmXem đoạn trích Bảng dữ liệu với hộp tìm kiếmXem đoạn trích Bảng dữ liệu với hộp tìm kiếmXem đoạn trích Xem tất cả các đoạn trích Tìm kiếm bảng Bootstrap Lưu ý: Tài liệu này dành cho phiên bản cũ hơn của Bootstrap (v.4). Một phiên bản mới hơn có sẵn cho Bootstrap 5. Chúng tôi khuyên bạn nên chuyển sang phiên bản mới nhất của sản phẩm - Thiết kế vật liệu cho Bootstrap 5. Truy cập Docs V.5 This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5 Siêu nhanh và dễ sử dụng chức năng tìm kiếm dành riêng cho các bảng của chúng tôi. Để thao tác tìm kiếm bảng, bạn có thể sử dụng một trong các tùy chọn được trình bày dưới đây. Để bắt đầu làm việc với các bảng của chúng tôi, vui lòng xem tab "Bắt đầu" trên trang này."Getting Started" tab on this page. Lưu ý: Tích hợp này có sẵn từ phiên bản 4.5.7 (phát hành 16.07.2018). This integration is available from version 4.5.7 (released 16.07.2018).
Ví dụ cơ bản
| Tên | Chức vụ | Văn phòng | Tuổi tác | Ngày bắt đầu | Lương |
|---|
| Tiger Nixon | Kiến trúc hệ thống | Edinburgh | 61 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | Tokyo | 63 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 66 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Edinburgh | 22 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | Tokyo | 33 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 61 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 59 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Tác giả kỹ thuật Junior | Tokyo | 55 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 39 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Edinburgh | 23 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | Tokyo | 30 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | Edinburgh | 22 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | San Francisco | 36 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Tokyo | 43 | 2011/07/25 | $ 170,750 | | Ashton Cox | Kế toán viên | Tokyo | 19 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | Tokyo | 66 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 64 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 59 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Tokyo | 41 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | Edinburgh | 35 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | San Francisco | 30 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 40 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 21 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | 2012/03/29 | 23 | $ 433,060 | Airi Satou | | 2008/11/28 | $ 162,700 | Tokyo | 47 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | Edinburgh | 42 | 2011/04/25 | $ 320,800 | | Garrett Winters | Kế toán viên | Tokyo | 28 | 2011/07/25 | $ 170,750 | | Ashton Cox | Nhà phát triển JavaScript cao cấp | San Francisco | 28 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 48 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Tokyo | 20 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | 2012/03/29 | 37 | $ 433,060 | Airi Satou | | 2008/11/28 | Tác giả kỹ thuật Junior | Tokyo | 53 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | Tokyo | 27 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 22 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Edinburgh | 46 | 2011/04/25 | $ 320,800 | | Garrett Winters | Tác giả kỹ thuật Junior | San Francisco | 47 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Kế toán viên | San Francisco | 51 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 41 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 62 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Kế toán viên | Tokyo | 37 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 65 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Tokyo | 64 | 2011/07/25 | $ 170,750 | | Ashton Cox | Nhà phát triển JavaScript cao cấp | Tokyo | 38 | 2011/07/25 | $ 170,750 | | Ashton Cox | Nhà phát triển JavaScript cao cấp | Tokyo | 37 | 2011/07/25 | $ 170,750 | | Ashton Cox | Tác giả kỹ thuật Junior | San Francisco | 61 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 47 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Tokyo | 64 | 2011/07/25 | $ 170,750 | | Ashton Cox | Nhà phát triển JavaScript cao cấp | San Francisco | 63 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | San Francisco | 56 | 2009/01/12 | $ 86.000 | | Cedric Kelly | Nhà phát triển JavaScript cao cấp | Edinburgh | 43 | 2012/03/29 | $ 433,060 | | Airi Satou | Nhà phát triển JavaScript cao cấp | San Francisco | 46 | 2009/01/12 | $ 86.000 | | Hermione Butler | Giám đốc khu vực | London | 47 | 2011/03/21 | $ 356,250 | | Lael Greer | Quản trị hệ thống | London | 21 | 2011/03/21 | $ 356,250 | | Lael Greer | Quản trị hệ thống | 2009/02/27 | 30 | $ 103.500 | Jonas Alexander | | Nhà phát triển | Giám đốc khu vực | San Francisco | 51 | 2010/07/14 | $ 86.500 | | Shad Decker | Edinburgh | 2008/11/13 | 29 | $ 183.000 | $ 86.500 | | Shad Decker | Edinburgh | 2008/11/13 | 27 | $ 183.000 | Michael Bruce | | Nhà phát triển JavaScript | Singapore | 2011/06/27 | Donna Snider | Hỗ trợ khách hàng | Newyork |
|---|
2011/01/25"JavaScript" tab in the code below.
Văn phòngTuổi tác Ngày bắt đầuLương Để sử dụng DataTables, hãy gọi phương thức $().DataTables() trên bảng. Xem ví dụ chính xác trong tab "JavaScript" trong mã bên dưới. Bật / tắt tìm kiếm
Tìm kiếm được bật theo mặc định, vì vậy nếu bạn muốn có nó, bạn không cần phải làm bất cứ điều gì.Vô hiệu hóa các tính năng mà bạn không muốn sử dụng cho một bảng cụ thể có thể dễ dàng thực hiện bằng cách đặt một biến trong đối tượng khởi tạo. Danh sách đầy đủ các tùy chọn có sẵn có sẵn trong tham chiếu DataTables. Tùy chọn bảng nâng caoĐối với các tùy chọn nâng cao của các bảng, bạn có thể xem các trang tài liệu cụ thể được liệt kê dưới đây.
Làm cách nào để tạo một hộp tìm kiếm cho một bảng?
Nếu bạn muốn tạo một hộp tìm kiếm cho bảng HTML hiện tại của mình, thì bạn chỉ cần tạo một phần tử đầu vào.Vì vậy, hãy tạo đầu vào và đặt tên lớp của bảng của bạn thành thuộc tính "bảng dữ liệu".3. Về cơ bản, các kiểu CSS là tùy chọn cho bảng.create the input and set the class name of your table to the "data-table" attribute. 3. Basically, the CSS styles are optional for the table.
Bảng sọc là gì?
.Table striped.Thêm dải ngựa vằn vào bất kỳ hàng bảng nào trong (không có sẵn trong IE8) hãy thử nó..Table Biên giới.Thêm đường viền ở tất cả các mặt của bảng và ô. Adds zebra-striping to any table row within (not available in IE8) Try it. .table-bordered. Adds border on all sides of the table and cells.
Lớp Bootstrap 4 nào có thể được sử dụng để tạo một bảng không biên giới?
Thêm .Table không biên giới cho một bảng không có đường viền..table-borderless for a table without borders.
Làm cách nào để tìm một bảng dữ liệu?
Tìm kiếm trên các cột riêng lẻ có thể được thực hiện bằng các phương thức Cột (). Search () và cột (). Search ().DataTables có một thuật toán tìm kiếm tích hợp được gọi là tìm kiếm "thông minh" và được thiết kế để giúp tìm kiếm dữ liệu bảng, dễ sử dụng cho người dùng cuối.columns().search() and column().search() methods. DataTables has a built in search algorithm referred to as "smart" searching and is designed to make searching the table data, easy to use for the end user. |
