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

<div id="tid" class="col-sm-12 col-md-12">  <div id="secondtid" hidden="hidden"></div></div>

<script type="text/javascript">    function getgaoxinqu() {      $('#secondtid').remove();      $("#tid").append(              "<div 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></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>

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();      }

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 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>" +          "</div>");  //创建表头   /*$.ajax({        url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action         data : {          index : ''        },        type : 'post',        success : function(data) {          var dataObj = eval(data);        },        error : function() {          alert("异常！");        }  });*/  //填充数据  initDatatables();}

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<titles.size();i++){        Map record = (Map)titles.get(i);              sql.append(" ").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<Map> lt = ds.executeSqlToRecordMap(sql.toString(),Integer.valueOf(start),Integer.valueOf(length));      Map result = new LinkedHashMap();      result.put("draw", draw);      result.put("recordsTotal", totalCount);//记录总行数      result.put("recordsFiltered", filterCount);//过滤的行数         int count=Integer.valueOf(length)+1;      for(Map r : lt){        r.put("DT_RowId", r.get("id"));//设置行主键        Map rowDate = new LinkedHashMap();//row data        rowDate.putAll(r);        r.put("DT_RowData", rowDate);        r.put("countInx", count);        count++;      }      result.put("data", lt);      try {        convertListToJson(result, response);      } catch (Exception e1) {        // TODO Auto-generated catch block        e1.printStackTrace();      }    }  }  /**   * 得到所有的列标题名称   * @return    */  private List getTitles(String tableCode,String fieldCode,DictionaryServiceImpl ds){    /*StringBuilder sql = new StringBuilder("select UPPER(ODS_DF_NAME) fieldName,ODS_DF_CN_NAME fieldLabel,ODS_DF_CODE fieldCode,UPPER(ODS_DF_DATA_TYPE) fieldType from ODS.ODS_DF_INFO_REG ");    sql.append(" where ODS_TB_CODE= '"+tableCode+"' ");    List<Map> list = ds.executeSqlToRecordMap(sql.toString());    return list;*/    StringBuilder sql = new StringBuilder("select UPPER(ODS_DF_NAME) fieldName,ODS_DF_CN_NAME fieldLabel,ODS_DF_CODE fieldCode,UPPER(ODS_DF_DATA_TYPE) fieldType from ODS.ODS_DF_INFO_REG ");    sql.append(" where 1=1 ");    sql.append(" and ODS_TB_CODE = '"+tableCode+"'");    sql.append(" and ODS_DF_NAME in (");    String[] tmp = fieldCode.split(",");    StringBuilder ids = new StringBuilder();    for(String t : tmp){      if(StringUtils.isEmpty(t)) continue;      ids.append("'").append(t).append("',");    }    if(ids.lastIndexOf(",")>0) ids.deleteCharAt(ids.lastIndexOf(","));    sql.append(ids);    sql.append(")");        List lt = ds.executeSqlToRecordMap(sql.toString());    return lt;  }  /**   * 前台搜索   * @param fieldLt   * @return   */  private String getFilterSql(List<Map> fieldLt,HttpServletRequest request) {    StringBuilder filterSql = new StringBuilder(" and ( ");    String searchKey = "search[value]";    String searchValue = request.getParameter(searchKey);    System.out.println(searchValue);    if(StringUtils.isEmpty(searchValue)) return "";    List<String> filterDetail = new ArrayList();    for(int i=0;i<fieldLt.size();i++){      Map field = fieldLt.get(i);      if(field.get("FIELDTYPE").equals("VARCHAR")){        String subKey = "columns["+i+"][searchable]";            if("true".equals(request.getParameter(subKey))){          String fieldName = field.get("FIELDNAME").toString();          String subSql = fieldName + " like '%"+searchValue+"%'";          filterDetail.add(subSql);        }      }    }    if(filterDetail.size()==0) return "";    boolean f = true;    for(String subSql : filterDetail){      if(f){        f= false;        filterSql.append(subSql);      }else{        filterSql.append(" OR ").append(subSql);      }    }    filterSql.append(")");    return filterSql.toString();  }  /**   * 排序   * @param fieldLt   * @return   */  private String getOrderSql(String[] titles,HttpServletRequest request){    StringBuilder orderSql = new StringBuilder(" order by ");    String indexKey = "order[0][column]";    String dirKey = "order[0][dir]";    Integer columnIndex = Integer.valueOf(request.getParameter(indexKey));    String dir = request.getParameter(dirKey);    if(columnIndex<=titles.length){      orderSql.append(titles[columnIndex]).append(" ").append(dir);      return orderSql.toString();    }    return "";  }  public void convertListToJson(Map map,HttpServletResponse response)throws Exception{    JSONArray json = JSONArray.fromObject(map);     response.setHeader("Cache-Control", "no-cache");    response.setContentType("text/html; charset=GBK");     PrintWriter writer;    writer = response.getWriter();    writer.write(json.get(0).toString());    writer.close();  }}