使用方法:
1、引入jquery.js文件
2、引入order-filter.js文件
3、給table添加class=“order-filter”
源碼:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="order-filter.js"></script>
//行排序規則
function rowSort(a, b, thIndex, asc) {
var textA = $(a.children[thIndex]).html();
var textB = $(b.children[thIndex]).html();
var digitA = parseFloat(textA);
var digitB = parseFloat(textB);
//字符串比較
if (isNaN(digitA) || isNaN(digitB))
return asc ? textA > textB : textA < textB;
//數字比較
return asc ? digitA > digitB : digitA < digitB;
};
//頁面加載完成
$(document).ready(function () {
//添加行排序篩選算法
$(".order-filter").each(function () {
//查找變量
var tbody = $(this).find("tbody");
var lines = $(tbody).children();
var title = lines[0];
var rows = new Array();
for (var index = 1; index < lines.length; index++)
rows.push(lines[index]);
//遍歷th
$(title.children).each(function (thIndex, th) {
//選項
var options = new Array();
$(rows).each(function (rowIndex, row) {
var option = $(row.children[thIndex]).html();
if ($.inArray(option, options) == -1)
options.push(option);
});
options.sort();
//添加屬性
var html = '<span style="cursor:pointer;">' + $(th).html() + '</span><select><option>--</option>';
$(options).each(function (optionIndex, option) {
html += '<option>' + option + '</option>';
});
html += "</select>"
$(th).html(html);
//選擇事件
$(th).find("select").change(function () {
//刪除所有
$(rows).each(function (rowIndex, row) {
$(row).remove();
});
//收集篩選值
var selects = new Array();
$(title.children).each(function (thIndex1, th1) {
selects.push($(th1).find("select").val());
});
//判斷篩選值
$(rows).each(function (rowIndex, row) {
var show = true;
$(row).children().each(function (cellIndex, cell) {
if (selects[cellIndex] != "--" && $(cell).html() != selects[cellIndex]) {
show = false;
return false; //break;
}
});
if (show)
$(tbody).after(row);
});
});
//點擊事件
$(th).find("span").click(function () {
//排序規則
var order = $(th).attr("order");
var asc = order == "asc";
if (asc)
$(th).attr("order", "desc");
else
$(th).attr("order", "asc");
//排序 api:.sort()真的不靠譜，不信自己試
//rows.sort(function (a, b) {
// return rowSort(a, b, thIndex, asc);
//});
//排序 冒泡排序...
var temp;
for (var index1 = rows.length - 1; index1 > 0; index1--) {
for (var index2 = 0; index2 < index1; index2++) {
if (rowSort(rows[index2], rows[index2 + 1], thIndex, asc)) {
temp = rows[index2 + 1];
rows[index2 + 1] = rows[index2];
rows[index2] = temp;
}
}
}
//篩選
$(th).find("select").change();
});
});
});
});
Demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>OrderAndFilter</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="order-filter.js"></script>
</head>
<body>
<style type="text/css">
td {
width: 100px;
border: solid 3px black;
}
</style>
<table class="order-filter">
<tr>
<td>T0</td>
<td>T1</td>
<td>T2</td>
<td>T3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>