Tablesorter full (ok)
https://plugins.jquery.com/tablesorter/
Last updated
Advanced Javascript
https://plugins.jquery.com/tablesorter/
Last updated
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
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
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
<!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>