Table表格列收缩/展开

需要添加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("+");
	   }
	});
}

收缩状态下:

展开状态下: