jquery表格datatables实例解析 直接加载和延迟加载

参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,
由于时间紧，省略了很多，所以总结份简化版的仅供参考。

1、直接加载，这个比较简单，如下

<div> <div hidden="hidden"></div> </div>

jsp用了bootstrap的栅格，js如下

<script type="text/javascript"> function getgaoxinqu() { $('#secondtid').remove(); $("#tid").append( "<div><table ><thead><tr><th nowrap>id</th><th nowrap>高新区名称</th><th nowrap>地区</th><th nowrap>工商注册企业数</th><th nowrap>网址</th><th nowrap>工业总产值(千元)</th><th nowrap>工业增加值(千元)</th><th nowrap>主导产业</th><th nowrap>财政收入（万元）</th><th nowrap>财政支出（万元）</th></tr></thead><tbody></tbody></table></div>"); $.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<GaoXinDistrict> gxlist=new ArrayList<GaoXinDistrict>(); String sql="select * from ODS10000060"; try { List<Map> list = oracledictionaryService.executeSqlToRecordMap(sql); for (Map map : list) { GaoXinDistrict gx=new GaoXinDistrict(); Object id= map.get("ID"); Object name = map.get("NAME"); Object JB = map.get("JB"); Object DY = map.get("DY"); Object YEAR = map.get("YEAR"); Object FZR = map.get("FZR"); Object TBR = map.get("TBR"); Object phone = map.get("PHONE"); Object EMAIL = map.get("EMAIL"); Object WWW = map.get("WWW"); Object GXQMJSUM = map.get("GXQMJSUM"); Object JCMJ = map.get("JCMJ"); Object GXQYY = map.get("GXQYY"); Object GYSUM = map.get("GYSUM"); Object GYADD = map.get("GYADD"); Object CZTR = map.get("CZTR"); Object CZZC = map.get("CZZC"); Object DEC = map.get("DEC"); Object ZDCY = map.get("ZDCY"); 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(()); 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.printStackTrace(); }

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( "<div>" + "<table ><thead><tr>" + "<th nowrap>id</th>" + "<th nowrap>年份</th>" + "<th nowrap>地区</th>" + "<th nowrap>工业总产值（万元）</th>" + "<th nowrap>企业数（家）</th>" + "</tr></thead><tbody></tbody></table>" + "</div>"); //创建表头 /*$.ajax({ url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action data : { index : '' }, type : 'post', success : function(data) { var dataObj = eval(data); }, error : function() { alert("异常！"); } });*/ //填充数据 initDatatables(); }

注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分