5 bước cơ bản để tạo một datatable plugin cho jQuery

datatable plugin cho jQuery

Bài viết này dành cho những bạn nào thích tìm hiểu các phương pháp giải quyết vấn đề với jQuery trong quá trình phát triển front-end. Qua bài viết này, bạn sẽ học được cách viết một datatable plugin cho jQuery (tìm hiểu thêm về datatable tại đây: https://www.datatables.net).

Nội dung tổng quát:

  1. Tạo 1 plugin đơn giản trong jQuery
  2. Thêm dòng mới trong table
  3. Xoá dòng trong table
  4. Tìm kiếm trong table
  5. Sắp xếp các dòng trong table

Bước 1: Tạo một plugin cho jQuery

Ở bước này ta sẽ tìm hiểu cách tạo ra 1 plugin đơn giản trong jQuery. Trước hết, chúng ta cần hiểu một chút về hoạt động của jQuery. Ví dụ:

Đây là 1 đoạn code cơ bản cho những ai đã dùng qua jQuery. Vậy hoạt động đằng sau đoạn code này là gì? Khi ta dùng dấu $ để chọn 1 DOM element (trong ví dụ là div) thì nó sẽ trả về 1 jQuery object. Object này sẽ chứa tất cả những phương thức (.css(), .click(), v.v…) và áp dụng cho những element nào phù hợp với selector (trong ví dụ là tất cả thẻ div), object này sẽ có những phương thức từ $.fn object. Giờ chúng ta cần 1 plugin datatable (mình đặt là MyDatatable) thì ta sẽ có định nghĩa sau đây:

  1. Tham số cấu hình: những tham số mặc định cho plugin sử dụng
  2. Gộp tham số: gộp những tham số
  3. Hàm xử lý: logic xử lý chính của plugin

Biến $ thường được sử dụng phổ biến trong các thư viện của javascript sẽ dễ bị xung đột với plugin này của chúng ta nên cần phải đưa đoạn code trên vào 1 scope để giải quyết vấn đề này. Ta sẽ có:

Lúc này ta hoàn toàn có thể gọi plugin MyDatatable bằng đoạn code

Giả sử ta cần cấu hình tham số mặc định và có thể thay đổi nó khi gọi plugin ta dùng cách sau đây:

Thay đoạn code

thành

Và khi ta gọi plugin này theo đoạn code:

Thì tham số mặc định sortable của plugin sẽ mang giá trị là true. Việc gộp tham số này sẽ dựa vào đoạn code

Và như vậy trong quá trình sử dụng, biến settings là 1 biến nội bộ của plugin MyDatatable cho các bạn sử dụng và có thể linh hoạt điều chỉnh dễ dàng và tường minh hơn trong code.Bạn có thể tham khảo các bước định nghĩa nâng cao hơn tại Advanced jQuery Plugin Concepts.

Bước 2: Thêm dòng mới trong table

Bước 1 vừa rồi, ta đã biết làm thế nào để định nghĩa 1 plugin cơ bản. Giờ chúng ta sẽ bắt đầu viết phương thức thêm 1 dòng mới trong table cho plugin MyDatatable. Giờ ta sẽ có file index.html và file MyDatatable.js được định nghĩa như sau:

File MyDatatable.js đã có bổ sung thêm định nghĩa các phương thức thực hiện. Ở đây mình lấy phương thức methods.load để thực hiện thêm 100 dòng vào table bằng các dùng hàm append(). Đối với những bạn sử dụng jQuery lần đầu tiên tiếp xúc với việc thêm 1 hoặc nhiều elements sẽ dùng append() để thêm code html vào bên trong element. Đây là cách không tốt vì hàm append() sẽ chuyển kiểu chuỗi thành các node DOM rồi mới thêm vào trong node cha (node cha trong ví dụ này là tbody.container). Bất lợi của việc sử dụng phương pháp này là:

  • Tốc độ sẽ càng chậm nếu số lượng node có trong chuỗi append vào càng phức tạp.
  • Thay đổi cấu trúc html trong chuỗi append càng khó khi nó càng phức tạp.
  • Sử dụng html trong file .js làm cho code không tường minh, phụ thuộc lẫn nhau giữa js và html.

Từ những bất lợi đó, mình sẽ đề xuất 1 giải pháp thao tác hoàn toàn trên DOM giúp tăng tốc độ, tách biệt code html và js để dễ dàng thay đổi, bảo trì.

Ta thay đổi 2 file trên như sau:

Ý tưởng của đoạn code thay đổi ở trên như sau:

  • Có 1 node DOM ẩn chứa đầy đủ cấu trúc của 1 dòng trong table để trong code js không cần phải tạo thêm cấu trúc này nữa.
  • Dùng hàm clone() để sao chép 1 node DOM
  • Dùng hàm find() của jQuery để tìm kiếm
  • Dùng hàm html() để thay đổi html bên trong node DOM (có thể thay đổi tương tự với các thuộc tính khác của DOM như value, attrs, props,…)
  • Dùng appendTo() để thêm node DOM vào node cha và hàm show() để hiển thị lên trình duyệt.

Với phương pháp này ta đã giải được bài toán thêm 1 node DOM phức tạp với tốc độ nhanh hơn vì bỏ qua bước chuyển đổi về node DOM như cách hàm append() hoạt động.

Bước 3: Xoá dòng trong table

Ở bước này, ta sẽ tìm hiểu được việc tương tác với 1 dòng trong table, cụ thể là thao tác xoá đi 1 dòng. Ta thay đổi đoạn code trong file MyDatatable.js như sau:

Đoạn code mới này bổ sung việc bắt sự kiện click() của mỗi dòng trong table, sự kiện này sẽ gọi 1 hàm trong plugin là hàm methods.removeRow(). Thứ tự thực hiện việc xoá này như sau:

  • Xác định dòng nào trong table đang được click
  • Lấy giá trị id của dòng
  • Lấy giá trị id để thực hiện gọi ajax với mục đích thay đổi trên server
  • Xoá dòng khỏi table bằng hàm remove() trong jQuery

Với ý tưởng tìm theo node DOM này, các bạn có thể tư duy để thiết kế được làm thể nào để thực hiện thao tác sửa trong datatable rồi nhé.

Bước 4: Thêm tính năng tìm kiếm cho table

Trong datatable thì chức năng tìm kiếm rất hữu ích nên mình sẽ giới thiệu 1 phương pháp sau đây. Ta thay đổi code như sau:

Ý tưởng của đoạn code mới như sau:

  • Thêm 1 text input vào cấu trúc của html dùng để tìm kiếm
  • Bắt sự kiện keyup của input này trong hàm init() của plugin. Ở đây chọn keyup vì ta sẽ tìm kiếm trên table mỗi khi 1 ký tự được nhập
  • Duyệt tất cả các dòng trong table
  • Duyệt các cột trong các dòng trên, nếu phù hợp thì hiển thị dòng, không phù hợp sẽ ẩn dòng. So sánh sử dụng hàm indexOf() với 2 giá trị so sánh được đưa về chữ thường (lowercase).

Như vậy ta đã có được 1 ô tìm kiếm cho tất cả các cột trong bảng. Vậy bài toán dành cho các bạn mở rộng thêm đó là làm thế nào để chúng ta có 1 ô tìm kiếm cho 1 cột trong bảng. Theo ví dụ trên ta sẽ có 1 ô tìm kiếm theo ID, 1 ô tìm kiếm theo Name và 1 ô tìm kiếm theo Score.

Bước 5: Sắp xếp các hàng trong table

Ý tưởng thực hiện như sau:

  • Thêm 1 nút bấm (button) để sắp xếp
  • Luân phiên thay đổi thuộc tính data-sort của nút bấm: 1 là tăng dần, -1 là giảm dần.
  • Sắp xếp table dựa vào cột Name, hàm sort() trong jQuery là yếu tố quyết định trong trường hợp này. Để giải mã đoạn code return nameB.localeCompare(nameA) * type. Các bạn xem thêm tại https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort. Hàm sort sẽ trả về 1 mảng là các dòng trong table đã được sắp xếp tăng hoặc giảm theo cột Name.
  • Append lại tất cả các phần tử thuộc mảng sau khi sắp xếp vào container.

Và bài toán mở rộng cho các bạn là mỗi khi bấm vào header của cột (thead) sẽ sắp xếp tăng giảm theo cột đó.

Toàn bộ code và kết quả:

Như vậy mình đã vừa chia sẻ xong cách cơ bản đề hoàn thành 1 plugin datatable cho các bạn cũng như một số lưu ý và phương pháp thao tác trên DOM trong jQuery. Hy vọng với sự sáng tạo và đam mê của mình, các bạn sẽ hoàn thiện plugin này và đóng góp thêm nhiều những plugins có ích khác nữa nhé.

SSS Full-stack Engineer

Love Silicon Straits and want to know more about our company culture, working environment or job vacancies?
Find out more at careers.siliconstraits.vn.

Silicon Straits
Be Challenged. Be Inspired. Be Different.




  • Thuc Le

    Dữ, quá dữ

  • Nguyễn Đức Đông

    Thank for sharing!

Posted by

on December 22, 2015

in , , ,

Comments

Follow us for more later

or subscribe with