需要添加js引用:jquery.tablesorter.min.js
使用tablesorter排序,要給Table的class添加上tablesorter class=“tablesorter”
点击查看代码
function zDetail(jsondata) {
$("#DetailsTable").empty();
var _table = $("<table id='details' class='table table-hover table-bordered tablesorter' border=\"1\" cellspacing=\"0\"></table>");
_table.appendTo($("#DetailsTable"));
var _tr = $("<thead><tr><th>No.</th><th>年月</th><th>工号</th><th>姓名</th><th>干部</th>" +
"<th>象限</th><th>出勤</th><th>检验数</th><th>检出数</th><th>检出率 <input type='button' value='+' id='showbtn' class='btn-info' /></th><th class='iup'>1760檢驗數</th><th class='iup'>1906檢驗數</th><th class='iup'>1910檢驗數</th><th class='iup'>8650檢驗數</th><th class='iup'>RMA覆判</th><th class='iup'>間接檢驗</th><th class='iup'>品位再現拍攝</th><th class='iup'>GP</th><th class='iup'>EMC</th><th>效率(%)</th>"+
"<th>工作执行力(加分)</th><th>工作执行力(减分)</th><th>检出能力(加分)</th><th>检出能力(减分)</th>"+
"<th max-width='200px'>狀況說明</th><th max-width='200px'>對策/措施</th><th>填寫人</th></tr></thead>");
_tr.appendTo(_table);
var _tbody = $("<tbody></tbody>");
_tbody.appendTo(_table);
for (var i = 0; i < jsondata.length; i++)
{
var _tr = $("<tr></tr>");
var exception = ""
if ((jsondata[i].QTY > 1500) && (jsondata[i].NG_NUM == 0) || (jsondata[i].D_J < 0 ) )
{
_tr.css("background-color", "#ffbcb9"); // 修改背景颜色
}
_tr.appendTo(_table);
var _td = $("<td>" + jsondata[i].RID +
"</td><td>" + jsondata[i].Y_M +
"</td><td>" + jsondata[i].EMP +
"</td><td>" + jsondata[i].ENAME +
"</td><td>" + jsondata[i].LEADERS +
"</td><td>" + jsondata[i].SUBREGION +
"</td><td>" + jsondata[i].DAYS +
"</td><td>" + jsondata[i].QTY +
"</td><td>" + jsondata[i].NG_NUM +
"</td><td>" + jsondata[i].RATE +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td class='iup'>" + "0" +
"</td><td>" + jsondata[i].EFF +
"</td><td>" + jsondata[i].J_Z +
"</td><td>" + jsondata[i].J_J +
"</td><td>" + jsondata[i].D_Z +
"</td><td>" + jsondata[i].D_J +
"</td><td style=\"text-align: left;\"><a href=\"#\" class=\"cmm\" data-placement=\"left\">" + jsondata[i].CMM + "</a>" +
"</td><td style=\"text-align: left;\"><a href=\"#\" class=\"act\" data-placement=\"left\">" + jsondata[i].ACT +"</a>"+
//"</td><td>" + jsondata[i].ACT_DATE +
"</td><td>" + jsondata[i].FILLED_BY + "</td>");
_td.appendTo(_tr);
}
$("#details").tablesorter(); //表格排序(点击表头)
RegShowBtnToggler(); //列收缩/展开
};
//收缩/展开
function RegShowBtnToggler(){
$("#showbtn").click(function () {
$(".iup").toggle("fast");
if($("#showbtn").val() == '+'){
$("#showbtn").val("-");
}else{
$("#showbtn").val("+");
}
});
}
收缩状态下:
展开状态下:
标签:表格,收缩,tr,jsondata,appendTo,tablesorter,table,var,Table From: https://www.cnblogs.com/qiuyublog/p/18060369