Bảng dữ liệu HTML CSS

Tất cả chúng ta chắc hẳn đã từng thử các bảng HTML và gặp phải hạn chế là ít tương tác hơn. Trong blog này, Chúng tôi sẽ thảo luận về plugin JQuery để tạo bảng HTML tương tác. DataTables là một plugin jQuery mạnh mẽ có thể được sử dụng để tạo các bảng HTML có chức năng như tìm kiếm, sắp xếp và phân trang. Nó có thể sử dụng hầu hết mọi nguồn dữ liệu như DOM, Ajax và xử lý phía máy chủ. Đó là thư viện thân thiện với thiết bị di động có thể thích ứng với kích thước khung nhìn. Nhiều công ty nổi tiếng đang sử dụng plugin DataTables trong trang web của họ vì nó là nguồn mở và miễn phí

Hãy xem cách chúng tôi có thể thêm phần này vào trang web của mình và sử dụng các tính năng nâng cao của nó

Để

1
2
3

1
2
3

1. Cài đặt cục bộ - Chúng tôi có thể tải xuống các tệp và đặt nó vào thư mục của chúng tôi

1
2
3

1. Sử dụng Trình quản lý gói như npm hoặc bower -

1
2
npm install datatables.net # Core library
npm install datatables.net - dt # Styling

1
2
bower install--save datatables.net
bower install--save datatables.net - dt

Sau khi cài đặt và nhập thư viện vào trang HTML của chúng tôi. Chúng ta cần tạo một bảng HTML như thế này

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    
        
            Name
            Age
        
    
    
        
            James
            24
        
        
            Raj
            25
        
    

Trong Javascript, chúng ta cần khởi tạo DataTables

1
2
3
4
5
$(document)
  .ready(function () {
    $('#table_id')
      .DataTable();
  });

Đó là nó. Nếu chúng tôi chạy nó, chúng tôi sẽ nhận được một cái gì đó như thế này

Bây giờ, hãy tự động tạo bảng và truyền dữ liệu trong chính Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var data = [{
    "Name": "Paul",
    "Age": 22,
    "Location": "Canada",
    "Contact": "+1290418345"
			},
  {
    "Name": "Erica",
    "Age": 32,
    "Location": "Miami",
    "Contact": "+1992418345"
			},
  {
    "Name": "Pritam",
    "Age": 29,
    "Location": "India",
    "Contact": "+91977418345"
			},
  {
    "Name": "Williams",
    "Age": 20,
    "Location": "England",
    "Contact": "+324290418345"
			}
			];

Chúng tôi đã tạo một mảng các đối tượng JSON. Bây giờ chúng ta có thể chuyển dữ liệu này sang ví dụ DataTable

Đôi khi chúng ta có thể cần sử dụng các nút (hoặc một số phần tử HTML khác) trong chính bảng đó để xử lý dữ liệu của hàng đó. Chúng ta có thể làm điều đó với sự trợ giúp của DataTables. Mã sau đây có thể giúp chúng tôi thực hiện điều đó

1
2
3
4
5
6
{
  "data": null,
  render: function (data, type, row, meta) {
    return "Click!"
  }
}

Trong ví dụ này, chúng tôi đặt một nút bằng cách nhấp vào mà chúng tôi có thể thấy số liên lạc của người cụ thể đó

Phương pháp tốt nhất để nắm giữ DataTables để sử dụng trong dự án của bạn tùy thuộc vào môi trường lập trình của bạn. Trình tạo tải xuống bên dưới cung cấp một phương pháp đơn giản mà bạn có thể sử dụng để tạo gói DataTables tùy chỉnh của riêng mình - chỉ bao gồm phần mềm bạn cần và cung cấp các tùy chọn để lưu trữ phần mềm đó trên CDN của DataTables, tải xuống gói cục bộ hoặc cài đặt thông qua trình quản lý gói

Bước 1. Chọn một khung kiểu dáng

Kiểu dáng mặc định của DataTables

Phiên bản kế thừa của Bootstrap - hữu ích nếu bạn cần hỗ trợ các trình duyệt cũ

v4 có thể là thư viện kiểu dáng được sử dụng rộng rãi nhất trên thế giới

Phiên bản mới nhất của khung Bootstrap phổ biến chưa từng có

Khung CSS hiện đại dựa trên Flexbox

Một khung kiểu dáng đáp ứng hiện đại

Một bộ sưu tập các tiện ích Javascript cũng như khung tạo kiểu

Coi các từ và các lớp là các khái niệm có thể trao đổi. Giao diện người dùng ngữ nghĩa chính thức

Bước 2. Chọn gói

DataTables yêu cầu jQuery. Không chọn một trong hai phiên bản nếu bạn đã có nó

Sử dụng để tương thích với các trình duyệt cũ hơn. jQuery 3 yêu cầu IE9+

Không chọn nếu bạn đã có _STYLE_ trên trang của mình

Tăng cường các bảng HTML với các điều khiển tương tác nâng cao

Thêm các điều khiển chỉnh sửa đầy đủ vào DataTables của bạn

Editor là một tiện ích mở rộng thương mại cho DataTables, nó yêu cầu giấy phép để sử dụng lâu hơn thời gian dùng thử miễn phí. Vui lòng tạo tài khoản hoặc đăng nhập để có thể đưa Editor vào gói

Tiện ích mở rộng

Nhấp và kéo giống như Excel để sao chép và điền dữ liệu

Một khuôn khổ chung cho các nút tương tác người dùng

Các nút của người dùng cuối để kiểm soát mức độ hiển thị của cột

Sao chép vào khay nhớ tạm và tạo tệp Excel, PDF và CSV từ dữ liệu của bảng

Cần thiết cho nút xuất Excel HTML5

Cần thiết cho nút xuất PDF HTML5

Nút sẽ hiển thị dạng xem có thể in được của bảng

Nhấp và kéo sắp xếp lại cột

Bộ chọn ngày được sử dụng trong Trình chỉnh sửa, SearchBuilder và các thành phần khác cho DataTables

Cố định một hoặc nhiều cột ở bên trái hoặc bên phải của bảng cuộn

Đầu trang và/hoặc chân trang cố định cho bảng

Điều hướng bàn phím của các ô trong bảng, giống như bảng tính

Tự động hiển thị và ẩn các cột dựa trên kích thước trình duyệt

Hiển thị dữ liệu tương tự được nhóm lại với nhau theo điểm dữ liệu tùy chỉnh

Nhấp và kéo sắp xếp lại thứ tự các hàng

Hiển thị ảo bảng cuộn cho các tập dữ liệu lớn

Trình tạo tìm kiếm phức tạp do người dùng xác định

Bảng tìm kiếm cho DataTables cho phép lọc nhanh và có thể tùy chỉnh

Thêm khả năng chọn hàng, cột và ô vào bảng

Lưu và khôi phục trạng thái DataTables

Bước 3. Chọn phương thức tải xuống

• CDN
• Tải xuống
• NPM
• sợi
• người cúi đầu
• NuGet
• nhà soạn nhạc

DataTables CDN cung cấp một cách thuận tiện để nhanh chóng bắt đầu với DataTables. Phần mềm DataTables được lưu trữ trên CDN (được cung cấp bởi CloudFlare) và bạn chỉ cần bao gồm các tệp HTML và CSS theo hướng dẫn bên dưới

Sử dụng các tệp được thu nhỏ để có kích thước tệp nhỏ hơn và tải xuống nhanh hơn

Kết hợp các tệp với nhau để tải xuống nhanh hơn, thông thường

Tùy chọn CDN không khả dụng khi Trình chỉnh sửa được chọn. Để sử dụng Trình chỉnh sửa với các tệp CDN, hãy bỏ chọn Trình chỉnh sửa và tải xuống Trình chỉnh sửa trực tiếp để bao gồm tệp cục bộ. Ngoài ra, hãy nhấp vào tab tải xuống ở trên để tải xuống tất cả các tệp cùng nhau

Có thể tải xuống các tệp cần thiết cho các thẻ link và script hiển thị ở trên bằng cách sử dụng nút bên dưới. Gói được tải xuống dưới dạng tệp zip sẽ được giải nén và tải lên máy chủ web của bạn

Tải tập tin

NPM là trình quản lý gói đi kèm với Node phổ biến. JS và được sử dụng rộng rãi cho cả gói phía máy khách và phía máy chủ

Cài đặt

Sử dụng cách sau để cài đặt phần mềm đã chọn trong gói của bạn

Gói Editor NPM chỉ là gói giữ và cài đặt. Bạn vẫn sẽ cần tải xuống Trình chỉnh sửa. Gói NPM chứa tập lệnh có thể chạy để cài đặt các tệp cần thiết vào node_modules. Xem bài này để biết thêm chi tiết

mô-đun yêu cầu

Để có thể sử dụng phần mềm đã chọn trong gói của bạn, hãy sử dụng đoạn mã sau

Khi được sử dụng với CommonJS, tất cả các gói DataTables đều xuất một hàm xuất xưởng có thể được thực thi với hai đối số tùy chọn (được hiển thị mà không có ở trên)

1. Đối tượng cửa sổ để sử dụng (điều này là bắt buộc vì jQuery trong môi trường CommonJS không đầu có thể yêu cầu một cửa sổ có đính kèm tài liệu). Nếu không có tham số nào được đưa ra hoặc tham số đó bị sai, thì sẽ sử dụng window
2. Đối tượng jQuery mà DataTables nên được gắn vào. Nếu không có tham số nào được cung cấp, gói sẽ tự thực hiện require('jquery') để bao gồm jQuery

Ví dụ: nếu bạn muốn sử dụng các tham số `window` và `jQuery` của riêng mình

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )( window, $ );

Xin lưu ý rằng phần trên được hiển thị cho các mô-đun CommonJS. Nếu bạn đang sử dụng bộ tải AMD, bạn không cần thực thi thư viện required (i. e. xóa dấu ____18_______)

Sợi là trình quản lý gói sử dụng sổ đăng ký NPM và do đó có quyền truy cập vào tất cả các gói giống nhau

Cài đặt

Sử dụng cách sau để cài đặt phần mềm đã chọn trong gói của bạn

Gói Editor NPM chỉ là gói giữ và cài đặt. Bạn vẫn sẽ cần tải xuống Trình chỉnh sửa. Gói NPM chứa tập lệnh có thể chạy để cài đặt các tệp cần thiết vào node_modules. Xem bài này để biết thêm chi tiết

mô-đun yêu cầu

Để có thể sử dụng phần mềm đã chọn trong gói của bạn, hãy sử dụng đoạn mã sau

Khi được sử dụng với CommonJS, tất cả các gói DataTables đều xuất một hàm xuất xưởng có thể được thực thi với hai đối số tùy chọn (được hiển thị mà không có ở trên)

1. Đối tượng cửa sổ để sử dụng (điều này là bắt buộc vì jQuery trong môi trường CommonJS không đầu có thể yêu cầu một cửa sổ có đính kèm tài liệu). Nếu không có tham số nào được đưa ra hoặc tham số đó bị sai, thì sẽ sử dụng window
2. Đối tượng jQuery mà DataTables nên được gắn vào. Nếu không có tham số nào được cung cấp, gói sẽ tự thực hiện require('jquery') để bao gồm jQuery

Ví dụ: nếu bạn muốn sử dụng các tham số `window` và `jQuery` của riêng mình

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )( window, $ );

Xin lưu ý rằng phần trên được hiển thị cho các mô-đun CommonJS. Nếu bạn đang sử dụng bộ tải AMD, bạn không cần thực thi thư viện required (i. e. xóa dấu ____18_______)

Bower là trình quản lý gói phía máy khách phổ biến và mặc dù hiện tại phần lớn nó đã được thay thế bởi npm/sợi, nhưng vẫn có một số dự án cũ sử dụng nó

Cài đặt

Nuget là trình quản lý gói cho. NET, các gói dữ liệu được lưu trữ ở đây để chúng có thể dễ dàng tích hợp vào. dự án NET

Cài đặt

Trình soạn thảo là trình quản lý phụ thuộc cho PHP. Các gói được lưu trữ và có sẵn thông qua Trình soạn thảo từ Packagist, đây là kho lưu trữ chính của nhà soạn nhạc

Làm cách nào để tạo DataTable trong HTML và CSS?

Làm cách nào để sử dụng DataTable trong HTML?

Làm cách nào để tạo DataTable trong HTML?

Làm cách nào để thay đổi CSS trong DataTable?