MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hướng dẫn xây dựng chức năng sắp xếp dữ liệu

Sắp xếp dữ liệu là một trong những chức năng không thể thiếu được trong mỗi website, việc sắp xếp dữ liệu sẽ giúp đỡ rất nhiều trong quá trình quản lý dữ liệu, đặc biệt là các website có lượng dữ liệu khổng lồ. Trong bài này mình sẽ cùng các bạn tìm hiểu thuật toán để sắp xếp dữ liệu thông qua quá trình xây dựng một ứng dụng sắp xếp dữ liệu đơn giản với javascript. 

1. Xây dựng giao diện hiển thị

Bước đầu tiên là xấy dựng phần giao diện hiển thị cho ứng dụng, các bạn tạo file index.html và thêm vào đoạn mã dưới đây:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Code RUN
<div class="container">
  <h2>Freetuts.net hướng dẫn xây dựng chức năng sắp xếp dữ liệu</h2>

  <button onclick="sortListDir()" id="sort">Sắp xếp</button>

  <ul id="id01">
    <li>Barcelona</li>
    <li>Madrid</li>
    <li>Manchester</li>
    <li>Berlin</li>
    <li>Rome</li>
    <li>Liverpool</li>
    <li>Milan</li>
    <li>Turin</li>
    <li>Paris</li>
    <li>LonDon</li>
    <li>Munich</li>
    <li>Ha Noi</li>
    <li>Ho Chi Minh City</li>
  </ul>
</div>

Ở đây mình sẽ tạo một button để thực hiện việc sắp xếp và một phần ul để chứa các giá trị mà chúng ta sẽ sắp xếp.

Tiếp dến chúng ta sẽ định dạng lại bằng CSS để cho dễ nhìn, các bạn thêm đoạn mã sau vào trong thẻ style:

Code RUN
.container {
  width: 500px;
  margin: auto;
}
#sort {
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
}
#id01 {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#id01 li {
  border: 1px solid #ddd;
  margin-top: -1px; 
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

OK giờ chúng ta sẽ chuyển đến bước tiếp theo.

2. Xử lý với Javascript

Trong bước này, chúng ta sẽ viết mã script để xử lý quá trình khi click vào button sắp xếp, các bạn thêm đoạn mã script dưới đây vào sau thẻ body:

Code RUN
<script>
function sortListDir() {
  // khai báo các biến cần thiết
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  // gán biến switching đại diện cho việc có tiếp tục kiểm tra hay không
  switching = true;
  //thiết lập kiểu sắp xếp, đầu tiên là tăng dần
  dir = "asc"; 
  // Sử dụng vòng lặp cho đến khi nào switching = false
  while (switching) {
    // Gán lại biến switching = false
    switching = false;
    // lấy danh sách các thẻ li chứa giá trị cần sắp xếp
    b = list.getElementsByTagName("LI");
    // lặp qua tất cả các phần tử li
    for (i = 0; i < (b.length - 1); i++) {
      /* gán giá trị cho biến shouldSwitch đại diện cho việc có đổi vị trí của 2 phần
      tử liền kề hay không */
      shouldSwitch = false;
      /*so sánh giá trị 2 phần tử gần kề tùy vào kiểu sắp xếp*/
      if (dir == "asc") {
        // Kiểu sắp xếp tăng dần
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Nếu phần tử đứng trước lớn hơn phần tử đứng sau thì gán
          giá trị cho biến shouldSwitch = true để đổi vị trí
          và thoát khỏi vòng lặp*/
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        // Kiểu sắp xếp giảm dần
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Nếu phần tử đứng trước nhỏ hơn phần tử đứng sau thì gán
          giá trị cho biến shouldSwitch = true để đổi vị trí
          và thoát khỏi vòng lặp*/
          shouldSwitch= true;
          break;
        }
      }
    }
    // kiểm tra biến shouldSwitch
    if (shouldSwitch) {
      /* Nếu shouldSwitch = true thì đổi vị trí hai phần tử hiện tại
      và tiếp tục lặp lại vòng lặp while */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // mỗi lần đổi vị trí tăng biến switchcount lên 1 đơn vị
      switchcount ++;
    } else {
      /* Nếu chưa đổi chỗ bất kì phần tử nào và kiểu sắp xếp là "asc" thì đổi
      kiểu sắp xếp thành "desc" và thực hiện lại vòng lặp while*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Đầu tiên các bạn hãy xem qua phần ghi chú, để hiểu về quá trình hoạt động của đoạn mã này.

Nếu các bạn đã xem ghi chú mà vẫn chưa hiểu rõ mình sẽ giải thích qua một ví dụ khác đơn giản hơn như sau:

Giả sử ta có một dãy số 1, 3, 6, 4, 5, 2 cần sắp xếp tăng dần, vậy các bước thực hiện sẽ như sau:

  • Lần lặp thứ nhất của vòng lặp while, ta sẽ chạy vòng lặp for qua tất cả các số, khi lặp đến lần thứ ba, do 6 > 4 nên shouldSwitch = true và thoát khỏi vòng lặp for. Do shouldSwitch = true nên đổi chỗ 6 với 4 và tăng biến switchcount lên một sau đó tiếp tục vòng lặp while, xem hình dưới đây:
    • huong dan xay dung chuc nang sap xep du lieu 1 jpg
  • Lần lặp thứ hai của vòng lặp while, cũng xử lý tương tự, ta sẽ đổi chỗ 6 và 5 như hình dưới đây:
    • huong dan xay dung chuc nang sap xep du lieu 2 png
  • Lần lặp thứ 3:
    • huong dan xay dung chuc nang sap xep du lieu 3 png
  • Lần 4 :
    • huong dan xay dung chuc nang sap xep du lieu 4 png
  • Lần 5:
    • huong dan xay dung chuc nang sap xep du lieu 5 png
  • Lần 6:
    • huong dan xay dung chuc nang sap xep du lieu 6 png
  • Lần 7:
    • huong dan xay dung chuc nang sap xep du lieu 7 png
  • Sau khi vòng lặp chạy xong lần 7, lúc này kết quả đã được sặp xếp nên biến shouldSwitch = false, chúng ta sẽ kiểm tra biến switchcount, vì mỗi lần đổi vị trí switchcount được tăng lên 1 nên switchcount != 0 do vậy biến switching sẽ mang giá trị false( được gắn khi bắt đầu mỗi vòng lặp while) dẫn đến việc dừng vòng lặp while và việc sắp xếp kết thúc. Lúc này ta có kết quả như hình ở bước 7.

Do bài này khá phức tạp trong quá trình xử lý nên các bạn chịu khó đọc kỹ các bước mình giải thích ở đây để hiểu được cách mà javascript sắp xếp các giá trị.

Vậy là xong rồi, giờ các bạn chạy file index.html để xem kết quả.

3. Lời kết

Qua bài viết này, mình đã hướng dẫn các bạn xử lý thuật toán sắp xếp các giá trị  với Javascript.Hi vọng nó sẽ giúp các bạn có thêm lựa chọn trong quá trình xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net

Tham khảo: w3schools.com

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top