jQuery datatable 折叠与展开


/**
 * 初始化表格
 * @returns
 */
function initHistoryAlarmInfoTable() {
    $('#historyAlarmInfoTable').DataTable({
    	language: {
			"lengthMenu": "每页  _MENU_ 行",
			"zeroRecords": "没有找到记录",
			"info": "当前 _START_ 到  _END_, 总共  _TOTAL_ 记录",
			"infoEmpty": "无记录",
			"paginate" : {
				"first" : "首页",
				"last" : "末页",
				"next" : "下一页",
				"previous" : "上一页"
			}
		},
		columns: [		
			{
            	"data": "alarm_describe", 
            	"title": "描述", 
            	"class": "center",
            	"sWidth":"35%",
            	"render": function (data, type, row, meta) {
            		if(data.length>30){
            			return getPartialRemarksHtml(data);//显示部分信息
            		}else{
            			 return data;//显示原始全部信息
            		}
                }
            },
			{
            	"data": "starttime", 
            	"title": "时间", 
            	"class": "center",
            	"render": function (data, type, row, meta) {
                    return new Date(data).format("yyyy-MM-dd hh:mm:ss");
                }
            },
           
			},
		],
		dom: 'rt<"bottom"ilp><"clear">',
		destroy : true,
		searching: false,
		processing : true,
		serverSide: true,
		bSort: false,		
		lengthMenu: [25, 50, 100, 150],
		ajax: {
			type: "post",
			url: "/alarm/infoshow/historyAlarmSearch/historyAlarmInfo",
			data: function(param) {
				param.device_id= $("#device_id").val();
			}
		},
	    createdRow : function(row, data, dataIndex) {
					if (data.alarm_describe.length > 30) {// 只有超长,才有td点击事件
						$(row).children('td').eq(8).attr('onclick', 'javascript:changeShowRemarks(this);');
					}
					$(row).children('td').eq(8).attr('content',data.alarm_describe);
				},
        fnInitComplete: function (oSettings) {
        },
        fnDrawCallback: function (oSettings) {
        }
    });

}






//table-内容过多时,显示与折叠 1
function changeShowRemarks(obj){//obj是td
    var content = $(obj).attr("content");
    if(content != null && content != ''){
        if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注,切换到显示部分
            //$(obj).removeAttr('isDetail');//remove也可以
            $(obj).attr('isDetail',false);
            $(obj).html(getPartialRemarksHtml(content));
        }else{//当前显示的是部分备注信息,切换到显示全部
            $(obj).attr('isDetail',true);
            $(obj).html(getTotalRemarksHtml(content));
        }
    }
}
//table-内容过多时,显示与折叠2
function getPartialRemarksHtml(remarks){
    return remarks.substr(0,30) + '  更多';
}

//table-内容过多时,显示与折叠 3
function getTotalRemarksHtml(remarks){
    return remarks + '  收起';
}

 

你可能感兴趣的:(网站前端)