jsp部分(此处只有table 其他无关):
<table id="dataTable" class="table table-striped table-list table-bordered" width="100%">
<thead>
<tr id="colTr">
</tr>
</thead>
<tbody id="colTb">
</tbody>
</table>
js部分:
//datatable表头
var dataTable;
$(function(){
//查询按钮
$("#searchBtn").click(function(){
debugger;
init();
});
})
function init(){
var id= $("input:hidden[name='id']").val(),//input type为hidden时的取值方式
name= $('#name').val();//input为text时的取值
var param = {
id: id,
name: name
};
$.ajax({
url : url,//url
type : 'POST',
data : param,
success : function(resdata) {
//请求成功后 如果存在datatable结构销毁
if(dataTable){
dataTable.destroy();
}
//清空table数据
$("#colTb").html("");
var colsDef = [];//定义表头列名
var obj = resdata.colist;//获取表头列名List
var tableData = resdata.data;//获取table数据
var cols = obj.length;
if(cols>0){
$("#colTr").html((function (cols){
var html = "";
var colsNameCN;
for(var i=0;i<cols;i++){
//alert(obj[i].column_cn);
// 第一列列名返回CheckBox
// if(i==0){
// colsNameCN=obj[i].column_cn;
// var html1=""
// html1 += "<label class='position-relative'>";
// html1 += "<input type='checkbox' id='checkAll' class='ace' />";
// html1 += "<span class='lbl'></span>";
// html+= $("<th width='5%' ></th>").append(html1).prop("outerHTML");
// }else{
colsNameCN=obj[i].view_name_cn;
var html1=""
if(colsNameCN.length>15){
html1 += "<span title='"+colsNameCN+"'>"+ colsNameCN.substr(0, 14) + "...</span>";
html += $("<th></th>").append(html1).prop("outerHTML");
}else{
html += $("<th></th>").append(colsNameCN).prop("outerHTML");
}
// }
}
return html;
})(cols));
}
// 第一列数据返回为CheckBox
// if(cols>0){
// for(var i=0;i<cols;i++){
// var colsNameEN;
// if(i==0){
// colsNameEN=obj[i].column_en;
// alert(colsNameEN);
// colsDef.push((function (colsNameEN){
// var colItem = {
// data:colsNameEN,
// render: function( data, type, full, meta ) {
// if (data) {
// var html = "<label class='position-relative' >";
// html += "<input type='checkbox' name='id' class='ace' value='"+data+"'/>";
// html += "<span class='lbl' ></span>";
// return html;
// } else {
// return "";
// }
// }
// }
// return colItem;
// })(colsNameEN));
// }else{
// colsNameEN=obj[i].column_en;
// colsDef.push((function (colsNameEN){
// var colItem = {
// data:colsNameEN,
// render: function( data, type, full, meta ) {
// if(data){
// return data;
// }else{
// return "";
// }
// }
// }
// return colItem;
// })(colsNameEN));
// }
// }
// }
if(cols>0){
for(var i=0;i<cols;i++){
var colsNameEN;
colsNameEN=obj[i].column_en;
colsDef.push((function (colsNameEN){
var colItem = {
data:colsNameEN,
render: function( data, type, full, meta ) {
if(data){
return data;
}else{
return "";
}
}
}
return colItem;
})(colsNameEN));
}
}
//datatable初始化
dataTable = $('#dataTable').DataTable({
"ordering": false,
"info": true,
"bLengthChange": false,
"iDisplayLength":10,
"bFilter": true,
"retrieve": true,
"processing": true,
"scrollX": true,
"fixedColumns": true,
"bScrollAutoCss": true,
"language": {
"search": "过滤:",
"lengthMenu": "每页 _MENU_ 条记录",
"loadingRecords": "请等待,数据正在加载中......",
"zeroRecords": "没有找到记录",
"info": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条,第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
"infoEmpty": "没有数据",
"infoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"processing": "正在查询中...",
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
data:tableData,
columns: colsDef
});
//全选
$('#checkAll').click(function() {
$('[name=id]:checkbox').prop('checked', this.checked);
});
},
error: function () {
alert("请求失败")
}
});
}
java后台返回数据
List<数据实体类> list = new ArrayList<TStdataTypeEntity>();
List<列名实体类> listcolu = new ArrayList<TColuEntity>();
Map<String,Object> map = new HashMap<String,Object>();
map.put("data", list);//table数据
map.put("colist", listcolu);//表头列名
return map;
列名实体类: private String column_en; //列名中文名 对应obj[i].column_en
private String column_cn; //列名英文名 对应obj[i].column_cn