jquery表格datatables，直接加载和延迟加载
参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,
由于时间紧，省略了很多，所以总结份简化版的仅供参考。
1，直接加载，这个比较简单，如下
<div id="tid" class="col-sm-12 col-md-12">
<div id="secondtid" hidden="hidden">div>
div>jsp用了bootstrap的栅格，js如下
<script type="text/javascript">
function getgaoxinqu() {
$('#secondtid').remove();
$("#tid").append(
"id 高新区名称 地区 工商注册企业数 网址 工业总产值(千元) 工业增加值(千元) 主导产业 财政收入（万元） 财政支出（万元）
");
$.ajax({
url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳转到 action
data : {
barName : '1'
},
serverSide: true,//服务器处理
traditional : true,
type : 'post',
success : function(data) {
var dataObj = eval(data);
$('#table_id').DataTable(
{
data : dataObj,
sScrollY: 600,
sScrollX: '100%',
columns : [ {
data : 'id'
},{
data : 'name'
}, {
data : 'dy'
}, {
data : 'gxqyy'
}, {
data : 'www'
}, {
data : 'gysum'
}, {
data : 'gyadd'
}, {
data : 'zdcy'
} , {
data : 'cztr'
} , {
data : 'czzc'
} ],
order:[[ 0, "asc" ]],
language : {
search : "在表格中搜索:",
show : "显示",
"sProcessing" : "处理中...",
"sLengthMenu" : "显示 _MENU_ 项结果",
"sZeroRecords" : "没有匹配结果",
"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中数据为空",
"sLoadingRecords" : "载入中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上页",
"sNext" : "下页",
"sLast" : "末页"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
}
});
showPage();
},
error : function() {
alert("异常！");
}
});
showPage();//高度调节
}
script>后台传个json就行了，由于这个破项目表名都很奇葩凑合看吧。
List gxlist=new ArrayList();
String sql="select * from ODS10000060";
try {
List 2 延迟加载
由于老项目用的struts1，造成前台form接收参数有问题，所以直接用servlet接收
前端jsp如1直接加载一样，js如下
function initDatatables(){
/*var columns = new Array();
$("#listTable thead th").each(function(index, element) {
var fieldName=$(element).attr("fieldName");
if(fieldName.indexOf('.')>0)fieldName=fieldName.substring(2);
columns.push({"data":fieldName});
});
if($('#listTable').length<=0) return;
//-- 列定义
var columnDefs = new Array();
$("#listTable thead th").each(function(index, element) {
if($(element).attr("fieldType")!='VARCHAR'){
columnDefs.push({
"orderable": true,
"searchable" : false,
"targets": index });
}
});*/
$('#listTable').DataTable( {
"processing": true,//处理中显示
"serverSide": true,//服务器处理
"sScrollY": 300,
"sScrollX": "100%",
"columns":[{"data":"ID"},{"data":"YEAR"},{"data":"REGION"},{"data":"GYZCZ"},{"data":"QYS"}],
/*"columns":columns,*/
/*"columnDefs":columnDefs,*/
// "bInfo": false,
// "bPaginate": false,
// "bFilter":false,/servlet/ComplexInquireServlet
// "bLengthChange": false,
"ajax": {
"url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
"type": "POST",
"data": function ( d ) {
var queryForm = document.queryConditionForm;
d['fieldCode'] = 'ID,YEAR,REGION,GYZCZ,QYS';
d['tableCode'] = 'ODS10000030'; //表名
}
},
"oLanguage": {
"search" : "在表格中搜索:",
"show" : "显示",
"sProcessing" : "处理中...",
"sLengthMenu" : "显示 _MENU_ 项结果",
"sZeroRecords" : "没有匹配结果",
"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中数据为空",
"sLoadingRecords" : "载入中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上页",
"sNext" : "下页",
"sLast" : "末页"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
}
} );
showPage();
}
function showQueryTable(){
//建table
$('#secondtid').remove();
$("#tid").append(
"" +
"" +
"id " +
"年份 " +
"地区 " +
"工业总产值（万元） " +
"企业数（家） " +
"
" +
"");
//创建表头
/*$.ajax({
url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action
data : {
index : ''
},
type : 'post',
success : function(data) {
var dataObj = eval(data);
},
error : function() {
alert("异常！");
}
});*/
//填充数据
initDatatables();
}注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分
public class DatatablesLazyLoad extends HttpServlet{
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.process(request, response);
}
/**
* datatables 延迟加载 数据加载，flag标注details表示注入数据，titles表示注入标题。
* @param request
* @param response
*/
private void process(HttpServletRequest request, HttpServletResponse response) {
ServletContext servletContext=request.getSession().getServletContext();
WebApplicationContext wac =WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
DictionaryServiceImpl ds=(DictionaryServiceImpl)wac.getBean("oracledictionaryService");
String flag = request.getParameter("flag");
String tableCode = request.getParameter("tableCode");
String fieldCode = request.getParameter("fieldCode");
if(flag==null)return;
if(flag.equals("titles")){
}else if(flag.equals("details")){
String draw = request.getParameter("draw");
String start = request.getParameter("start");
String length = request.getParameter("length");
StringBuilder sql = new StringBuilder("select ");
List titles = this.getTitles(tableCode,fieldCode,ds);
for(int i=0;i" ").append(record.get("FIELDNAME")).append(", ");
}
if(sql.lastIndexOf(",")>0) sql.deleteCharAt(sql.lastIndexOf(","));
sql.append(" from ").append(tableCode);
sql.append(" where 1=1 ");
String filterSql = getFilterSql(titles,request);
Integer totalCount =ds.getSqlRecordCount("select count(*) from (" + sql.toString()+ ") tmp");
Integer filterCount = ds.getSqlRecordCount("select count(*) from (" + sql.toString()+filterSql+ ") tmp");
String[] strings = fieldCode.split(",");
String orderSql = getOrderSql(strings,request);
sql.append(filterSql);
sql.append(orderSql);
List 总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。