jquery表格datatables实例解析 直接加载和延迟加载
参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,
由于时间紧，省略了很多，所以总结份简化版的仅供参考。
1、直接加载
，这个比较简单，如下
jsp用了bootstrap的栅格，js如下
rush:js;">
后台传个json就行了，由于这个破项目表名都很奇葩凑合看吧。
<div class="jb51code">
<pre class="brush:java;">
List gxlist=new ArrayList();
String sql="select * from ODS10000060";
try {
List
gx.setId(Integer.parseInt(String.valueOf(id)));
gx.setName(name.toString());
gx.setJB(JB.toString());
gx.setDY(DY.toString());
gx.setYEAR(YEAR.toString());
gx.setFZR(FZR.toString());
gx.setTBR(TBR.toString());
gx.setPhone(phone.toString());
gx.setEMAIL(EMAIL.toString());
gx.setWWW(WWW.toString());
gx.setGXQMJSUM(GXQMJSUM.toString());
gx.setJCMJ(JCMJ.toString());
gx.setGXQYY(GXQYY.toString());
gx.setGYSUM(GYSUM.toString());
gx.setGYADD(GYADD.toString());
gx.setCZTR(CZTR.toString());
gx.setCZZC(CZZC.toString());
gx.setDEC(DEC.toString());
gx.setZDCY(ZDCY.toString());
gxlist.add(gx);
}
parseJSONResult(gxlist,response);
} catch (Exception e) {
e.<a href="https://www.jb51.cc/tag/printstacktrace/" target="_blank" class="keywords">printstacktrace</a>();
}
2、延迟加载
由于老项目用的struts1，造成
前台form接收参数有问题，所以直接用servlet接收
前端jsp如1直接加载一样，js如下
<div class="jb51code">
<pre class="brush: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" : "显示","oPaginate" : {
"sFirst" : "首页","sLast" : "末页"
},"oAria" : {
"sSortAscending" : ": 以升序排列此列","sSortDescending" : ": 以降序排列此列"
}
}
} );
showPage();
}
function showQueryTable(){
//建table
$('#secondtid').remove();
$("#tid").append(
"
" +
"
