Jquery.js, jquery.dataTables.js, dataTables.bootstrap.js (optional) müssen eingeführt werden.
1. Laden Sie diesen Vergleich direkt Einfach, wie folgt:
<p id="tid" class="col-sm-12 col-md-12"> <p id="secondtid" hidden="hidden"></p> </p>
<script type="text/javascript"> function getgaoxinqu() { $('#secondtid').remove(); $("#tid").append( "<p id='secondtid' style='width: 100%;'><table id='table_id' class='table table-striped table-bordered table-hover no-footer dataTable display' ><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></p>"); $.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>
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(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.printStackTrace(); }
2. Verzögertes Laden
Da das alte Projekt Struts1 verwendet, gibt es ein Problem mit der Vorderseite. Endformular-Empfangsparameter. Verwenden Sie also direkt das Servlet, um das Front-End-JSP direkt zu laden. Das JS lautet wie folgt:
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( "<p id='secondtid' style='width: 100%;'>" + "<table id='listTable' class='table table-striped table-bordered table-hover no-footer dataTable display' ><thead><tr>" + "<th nowrap>id</th>" + "<th nowrap>年份</th>" + "<th nowrap>地区</th>" + "<th nowrap>工业总产值(万元)</th>" + "<th nowrap>企业数(家)</th>" + "</tr></thead><tbody></tbody></table>" + "</p>"); //创建表头 /*$.ajax({ url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action data : { index : '' }, type : 'post', success : function(data) { var dataObj = eval(data); }, error : function() { alert("异常!"); } });*/ //填充数据 initDatatables(); }
Hinweis: Dies ist bereits eine vereinfachte Version. Ja, der Tabellenkopf kann mit einem anderen Ajax übergeben werden. Er wird hier weggelassen und zu Tode geschrieben. Das Folgende ist der Backstage-Teil
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Codebeispiele für das direkte Laden von JQuery-Tabellen und das verzögerte Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!