# Tablesorter full (ok)

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>

{% file src="/files/XO61qMwpSmXtxMQOMXie" %}

**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**

![](/files/z27dfLmtweB3IZHt20mp)

```
<!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">
  <link rel="stylesheet" href="css/theme.blue.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>
  <button type="button" data-filter-column="1">^h</button> (beginning of word)<br>
  <button type="button" data-filter-column="1">s$</button> (end of word)<br>
  <button type="button" class="reset">Reset</button><br>
  <table id="filters" class="tablesorter">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>City</th>
        <th>Age</th>
        <th>Total</th>
        <th>Discount</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aaron</td>
        <td>Johnson Sr</td>
        <td>Atlanta</td>
        <td>35</td>
        <td>$5.95</td>
        <td>22%</td>
        <td>Jun 26, 2004 7:22 AM</td>
      </tr>
      <tr>
        <td>Aaron</td>
        <td>Johnson</td>
        <td>Yuma</td>
        <td>12</td>
        <td>$2.99</td>
        <td>5%</td>
        <td>Aug 21, 2009 12:21 PM</td>
      </tr>
      <tr>
        <td>Clark</td>
        <td>Henry Jr</td>
        <td>Tampa</td>
        <td>51</td>
        <td>$42.29</td>
        <td>18%</td>
        <td>Oct 13, 2000 1:15 PM</td>
      </tr>
      <tr>
        <td>Denni</td>
        <td>Henry</td>
        <td>New York</td>
        <td>28</td>
        <td>$9.99</td>
        <td>20%</td>
        <td>Jul 6, 2006 8:14 AM</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Hood</td>
        <td>Boston</td>
        <td>33</td>
        <td>$19.99</td>
        <td>25%</td>
        <td>Dec 10, 2002 5:14 AM</td>
      </tr>
      <tr>
        <td>Clark</td>
        <td>Kent Sr</td>
        <td>Los Angeles</td>
        <td>18</td>
        <td>$15.89</td>
        <td>44%</td>
        <td>Jan 12, 2003 11:14 AM</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Kent Esq</td>
        <td>Seattle</td>
        <td>45</td>
        <td>$153.19</td>
        <td>44%</td>
        <td>Jan 18, 2021 9:12 AM</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Johns</td>
        <td>Milwaukee</td>
        <td>13</td>
        <td>$5.29</td>
        <td>4%</td>
        <td>Jan 8, 2012 5:11 PM</td>
      </tr>
      <tr>
        <td>Aaron</td>
        <td>Evan</td>
        <td>Chicago</td>
        <td>24</td>
        <td>$14.19</td>
        <td>14%</td>
        <td>Jan 14, 2004 11:23 AM</td>
      </tr>
      <tr>
        <td>Bruce</td>
        <td>Evans</td>
        <td>Upland</td>
        <td>22</td>
        <td>$13.19</td>
        <td>11%</td>
        <td>Jan 18, 2007 9:12 AM</td>
      </tr>
      <tr>
        <td>Clark</td>
        <td>McMasters</td>
        <td>Pheonix</td>
        <td>18</td>
        <td>$55.20</td>
        <td>15%</td>
        <td>Feb 12, 2010 7:23 PM</td>
      </tr>
      <tr>
        <td>Dennis</td>
        <td>Masters</td>
        <td>Indianapolis</td>
        <td>65</td>
        <td>$123.00</td>
        <td>32%</td>
        <td>Jan 20, 2001 1:12 PM</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Hood</td>
        <td>Fort Worth</td>
        <td>25</td>
        <td>$22.09</td>
        <td>17%</td>
        <td>Jun 11, 2011 10:55 AM</td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
	  $.tablesorter.filter.types.start = function(config, data) {
	    if (/^\^/.test(data.iFilter)) {
	      return data.iExact.indexOf(data.iFilter.substring(1)) === 0;
	    }
	    return null;
	  };
	  $.tablesorter.filter.types.end = function(config, data) {
	    if (/\$$/.test(data.iFilter)) {
	      var filter = data.iFilter,
	        filterLength = filter.length - 1,
	        removedSymbol = filter.substring(0, filterLength),
	        exactLength = data.iExact.length;
	      return data.iExact.lastIndexOf(removedSymbol) + filterLength === exactLength;
	    }
	    return null;
	  };
	  $(function() {
	    $('#filters').tablesorter({
	      theme: 'blue',
	      widgets: ['zebra', 'filter'],
	      widgetOptions: {
	        filter_reset: '.reset'
	      }
	    });
	    $('button').click(function() {
	      var $t = $(this),
	        col = $t.data('filter-column'), // zero-based index
	        filter = [];
	      filter[col] = $t.text(); // text to add to filter
	      $('#filters').trigger('search', [filter]);
	      return false;
	    });
	  });
  </script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/advanced/tablesorter-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
