Tablesorter full (ok)

https://plugins.jquery.com/tablesorter/

Hoặc có thể tham khản tại: https://github.com/Mottie/tablesorter/wiki/Search

Hoặc nội dung viết dễ nhìn https://mottie.github.io/tablesorter/docs/?q=array&index=10#Introduction

362KB
master.zip
archive
Open

Ví dụ 1:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- choose a theme file -->
  <link rel="stylesheet" href="css/theme.default.min.css">
  <!-- load jQuery and tablesorter scripts -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
  <!-- tablesorter widgets (optional) -->
  <script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>
  <title>Document</title>
</head>
<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
      </tr>
      <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
      </tr>
      <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
      </tr>
      <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
  $(function() {
    $("#myTable").tablesorter();
  });
  </script>
</body>
</html>

Kết quả thật tuyệt vời

Document

Last Name
First Name
Email
Due
Web Site

Smith

John

jsmith@gmail.com

$50.00

http://www.jsmith.com

Bach

Frank

fbach@yahoo.com

$50.00

http://www.frank.com

Doe

Jason

jdoe@hotmail.com

$100.00

http://www.jdoe.com

Conway

Tim

tconway@earthlink.net

$50.00

http://www.timconway.com

$(function() { $("#myTable").tablesorter(); });

Ví dụ 2: Thực hiện chức năng search

Một ví dụ tuyệ vời

PreviousjQuery Resizable full (ok)NextLive search through table rows (ok)

Last updated