針對動態表格所寫（即每次刷新都請求後臺），通過回調函數調用生成表格代碼。
使用了jquery
th中需要設置屬性column_flag來作爲列標識
參數
el：table的jquery選擇器
ascHtml：正序時的顯示字符
descHtml：倒敘時的顯示字符
callback：點擊後的回調函數，三個參數分別爲th對象，排序規則（asc，desc），列標識
cols：傳入數組對象，默認爲對全部列排序
colsType：對應於cols，兩種設置，name：對應於column_flag選取排序列，number：對應於th序號選取排序列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 600px;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<table id="sortTable">
<thead>
<th column_flag="_col1">
col1
</th>
<th column_flag="_col2">
col2
</th>
<th column_flag="_col3">
col3
</th>
<th column_flag="_col4">
col4
</th>
</thead>
<tbody>
<tr>
<td>row_1 col_1</td>
<td>row_1 col_2</td>
<td>row_1 col_3</td>
<td>row_1 col_4</td>
</tr>
<tr>
<td>row_2 col_1</td>
<td>row_2 col_2</td>
<td>row_2 col_3</td>
<td>row_2 col_4</td>
</tr>
<tr>
<td>row_3 col_1</td>
<td>row_3 col_2</td>
<td>row_3 col_3</td>
<td>row_3 col_4</td>
</tr>
<tr>
<td>row_4 col_1</td>
<td>row_4 col_2</td>
<td>row_4 col_3</td>
<td>row_4 col_4</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
var sortUtil = function(){
var that = this;
var _initOption = {
cols: [],
colsType: "number",
ascHtml: "▲",
descHtml: "▼",
initShow: true,
callback: function(){
alert("error！callback未定義");
}
};
var initDynamic = function(option){
var _option = jQuery.extend({}, _initOption, option);
var tb = jQuery("" + _option.el);
var _onclick = function(){
var thObj = jQuery(this);
var curColumnFlag = thObj.attr("column_flag");
var curSort = thObj.attr("sort");
if(curSort == "asc"){
thObj.find("#_sortSpan").html(_option.descHtml);
var curSort = thObj.attr("sort", "desc");
_option.callback(thObj, "desc", curColumnFlag);
}else {
thObj.find("#_sortSpan").html(_option.ascHtml);
var curSort = thObj.attr("sort", "asc");
_option.callback(thObj, "asc", curColumnFlag);
}
};
if(_option.cols == null || _option.cols.length == 0){
for(var i = 0; i < tb.find("th").length; i++){
_option.cols.push(i);
}
_option.colsType = "number";
}
for(var i = 0; i < _option.cols.length; i++){
var temp;
if(_option.colsType == "number"){
temp = jQuery(tb.find("th").get(_option.cols[i]));
}else {//if(_option.colsType == "name")
temp = jQuery("" + _option.el).find("[column_flag='"+_option.cols[i]+"']");
}
temp.on("click", _onclick);
temp.css("cursor", "pointer");
temp.attr("sort", "asc");
if(_option.initShow){
temp.append("<span id='_sortSpan'>"+_option.ascHtml+"</span>");
}
}
};
return {
initDynamic: initDynamic
};
}();
// sortUtil.initDynamic({
// el: "#sortTable", //table id
// colsType: "number",//cols 數字格式
// ascHtml: "▲",
// descHtml: "▼",
// callback: function(thObj, sort, columnFlag){
// //alert(thObj + " _ " + sort + " _ " + columnFlag);
// },
// cols: [0, 1, 3] //cols 第1,2,4的th
// });
sortUtil.initDynamic({
el: "#sortTable", //table的jquery表達式
colsType: "name",//對應於cols，name：
ascHtml: "▲",
descHtml: "▼",
callback: function(thObj, sort, columnFlag){//th對象，排序規則（asc，desc），排序字段標識
alert(thObj + " " + sort + " " + columnFlag);
},
cols: ["_col1", "_col4"] //cols 第1,2,4的th
});
</script>
</html>