当前位置：Gxlcms > JavaScript > jquery表格datatables实例解析 直接加载和延迟加载

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

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

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

jsp用了bootstrap的栅格，js如下

  1. <script type="text/javascript">
  2.     function getgaoxinqu() {
  3.       $('#secondtid').remove();
  4.       $("#tid").append(
  5.               "<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>");
  6.       $.ajax({
  7.             url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳转到 action 
  8.             data : {
  9.               barName : '1'
  10.             },
  11.             serverSide: true,//服务器处理 
  12.             traditional : true,
  13.             type : 'post',
  14.             success : function(data) {
  15.               var dataObj = eval(data);
  16.               $('#table_id').DataTable(
  17.                       {
  18.                         data : dataObj,
  19.                         sScrollY: 600,
  20.                         sScrollX: '100%',
  21.                         columns : [ {
  22.                           data : 'id'
  23.                         },{
  24.                           data : 'name'
  25.                         }, {
  26.                           data : 'dy'
  27.                         }, {
  28.                           data : 'gxqyy'
  29.                         }, {
  30.                           data : 'www'
  31.                         }, {
  32.                           data : 'gysum'
  33.                         }, {
  34.                           data : 'gyadd'
  35.                         }, {
  36.                           data : 'zdcy'
  37.                         } , {
  38.                           data : 'cztr'
  39.                         } , {
  40.                           data : 'czzc'
  41.                         } ],
  42.                         order:[[ 0, "asc" ]],
  43.                         language : {
  44.                           search : "在表格中搜索:",
  45.                           show : "显示",
  46.                           "sProcessing" : "处理中...",
  47.                           "sLengthMenu" : "显示 _MENU_ 项结果",
  48.                           "sZeroRecords" : "没有匹配结果",
  49.                           "sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  50.                           "sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
  51.                           "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
  52.                           "sInfoPostFix" : "",
  53.                           "sSearch" : "搜索:",
  54.                           "sUrl" : "",
  55.                           "sEmptyTable" : "表中数据为空",
  56.                           "sLoadingRecords" : "载入中...",
  57.                           "sInfoThousands" : ",",
  58.                           "oPaginate" : {
  59.                             "sFirst" : "首页",
  60.                             "sPrevious" : "上页",
  61.                             "sNext" : "下页",
  62.                             "sLast" : "末页"
  63.                           },
  64.                           "oAria" : {
  65.                             "sSortAscending" : ": 以升序排列此列",
  66.                             "sSortDescending" : ": 以降序排列此列"
  67.                           }
  68.                         }
  69.                       });
  70.               showPage();
  71.             },
  72.             error : function() {
  73.               alert("异常！");
  74.             }
  75.           });
  76.       showPage();//高度调节
  77.     }
  78. </script>

后台传个json就行了，由于这个破项目表名都很奇葩凑合看吧。

  1. List<GaoXinDistrict> gxlist=new ArrayList<GaoXinDistrict>();
  2.       String sql="select * from ODS10000060";
  3.       try {
  4.         List<Map> list = oracledictionaryService.executeSqlToRecordMap(sql);
  5.         for (Map map : list) {
  6.           GaoXinDistrict gx=new GaoXinDistrict();
  7.           Object id= map.get("ID");
  8.           Object name = map.get("NAME");
  9.           Object JB = map.get("JB");
  10.           Object DY = map.get("DY");
  11.           Object YEAR = map.get("YEAR");
  12.           Object FZR = map.get("FZR");
  13.           Object TBR = map.get("TBR");
  14.           Object phone = map.get("PHONE");
  15.           Object EMAIL = map.get("EMAIL");
  16.           Object WWW = map.get("WWW");
  17.           Object GXQMJSUM = map.get("GXQMJSUM");
  18.           Object JCMJ = map.get("JCMJ");
  19.           Object GXQYY = map.get("GXQYY");
  20.           Object GYSUM = map.get("GYSUM");
  21.           Object GYADD = map.get("GYADD");
  22.           Object CZTR = map.get("CZTR");
  23.           Object CZZC = map.get("CZZC");
  24.           Object DEC = map.get("DEC");
  25.           Object ZDCY = map.get("ZDCY");
  26.           gx.setId(Integer.parseInt(String.valueOf(id)));
  27.           gx.setName(name.toString());
  28.           gx.setJB(JB.toString());
  29.           gx.setDY(DY.toString());
  30.           gx.setYEAR(YEAR.toString());
  31.           gx.setFZR(FZR.toString());
  32.           gx.setTBR(TBR.toString());
  33.           gx.setPhone(phone.toString());
  34.           gx.setEMAIL(EMAIL.toString());
  35.           gx.setWWW(WWW.toString());
  36.           gx.setGXQMJSUM(GXQMJSUM.toString());
  37.           gx.setJCMJ(JCMJ.toString());
  38.           gx.setGXQYY(GXQYY.toString());
  39.           gx.setGYSUM(GYSUM.toString());
  40.           gx.setGYADD(GYADD.toString());
  41.           gx.setCZTR(CZTR.toString());
  42.           gx.setCZZC(CZZC.toString());
  43.           gx.setDEC(DEC.toString());
  44.           gx.setZDCY(ZDCY.toString());
  45.           gxlist.add(gx);
  46.         }
  47.         parseJSONResult(gxlist, response);
  48.       } catch (Exception e) {
  49.         e.printStackTrace();
  50.       }

2、延迟加载
由于老项目用的struts1，造成前台form接收参数有问题，所以直接用servlet接收
前端jsp如1直接加载一样，js如下

  1. function initDatatables(){
  2.   /*var columns = new Array();
  3.   $("#listTable thead th").each(function(index, element) {
  4.     var fieldName=$(element).attr("fieldName");
  5.     if(fieldName.indexOf('.')>0)fieldName=fieldName.substring(2);
  6.     columns.push({"data":fieldName});
  7.   }); 
  8.   if($('#listTable').length<=0) return;
  9.   //-- 列定义
  10.   var columnDefs = new Array();
  11.   $("#listTable thead th").each(function(index, element) {
  12.     if($(element).attr("fieldType")!='VARCHAR'){        
  13.       columnDefs.push({        
  14.          "orderable": true, 
  15.          "searchable" : false,
  16.          "targets": index });
  17.     }    
  18.   });*/
  19.   $('#listTable').DataTable( {
  20.     "processing": true,//处理中显示
  21.     "serverSide": true,//服务器处理 
  22.     "sScrollY": 300,
  23.     "sScrollX": "100%", 
  24.     "columns":[{"data":"ID"},{"data":"YEAR"},{"data":"REGION"},{"data":"GYZCZ"},{"data":"QYS"}],
  25.     /*"columns":columns,*/
  26.     /*"columnDefs":columnDefs,*/
  27. //   "bInfo": false,
  28. //   "bPaginate": false,
  29. //   "bFilter":false,/servlet/ComplexInquireServlet
  30. //    "bLengthChange": false,
  31.     "ajax": {
  32.       "url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
  33.       "type": "POST",
  34.       "data": function ( d ) {
  35.         var queryForm = document.queryConditionForm;                
  36.         d['fieldCode'] = 'ID,YEAR,REGION,GYZCZ,QYS';
  37.         d['tableCode'] = 'ODS10000030'; //表名
  38.       }
  39.     },
  40.     "oLanguage": {
  41.       "search" : "在表格中搜索:",
  42.       "show" : "显示",
  43.       "sProcessing" : "处理中...",
  44.       "sLengthMenu" : "显示 _MENU_ 项结果",
  45.       "sZeroRecords" : "没有匹配结果",
  46.       "sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  47.       "sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
  48.       "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
  49.       "sInfoPostFix" : "",
  50.       "sSearch" : "搜索:",
  51.       "sUrl" : "",
  52.       "sEmptyTable" : "表中数据为空",
  53.       "sLoadingRecords" : "载入中...",
  54.       "sInfoThousands" : ",",
  55.       "oPaginate" : {
  56.         "sFirst" : "首页",
  57.         "sPrevious" : "上页",
  58.         "sNext" : "下页",
  59.         "sLast" : "末页"
  60.       },
  61.       "oAria" : {
  62.         "sSortAscending" : ": 以升序排列此列",
  63.         "sSortDescending" : ": 以降序排列此列"
  64.       }
  65.     }
  66.   } );
  67.   showPage();
  68. }
  69. function showQueryTable(){
  70.   //建table
  71.   $('#secondtid').remove();
  72.   $("#tid").append(
  73.           "<div id='secondtid' style='width: 100%;'>" +
  74.           "<table id='listTable' class='table table-striped table-bordered table-hover no-footer dataTable display' ><thead><tr>" +
  75.           "<th nowrap>id</th>" +
  76.           "<th nowrap>年份</th>" +
  77.           "<th nowrap>地区</th>" +
  78.           "<th nowrap>工业总产值（万元）</th>" +
  79.           "<th nowrap>企业数（家）</th>" +
  80.           "</tr></thead><tbody></tbody></table>" +
  81.           "</div>");
  82.   //创建表头 
  83.   /*$.ajax({
  84.         url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳转到 action 
  85.         data : {
  86.           index : ''
  87.         },
  88.         type : 'post',
  89.         success : function(data) {
  90.           var dataObj = eval(data);
  91.         },
  92.         error : function() {
  93.           alert("异常！");
  94.         }
  95.   });*/
  96.   //填充数据
  97.   initDatatables();
  98. }

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

  1. public class DatatablesLazyLoad extends HttpServlet{
  2.   @Override
  3.   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  4.     this.process(request, response);
  5.   }
  6.   /**
  7.    * datatables 延迟加载 数据加载，flag标注details表示注入数据，titles表示注入标题。
  8.    * @param request
  9.    * @param response
  10.    */
  11.   private void process(HttpServletRequest request, HttpServletResponse response) {
  12.     ServletContext servletContext=request.getSession().getServletContext();
  13.     WebApplicationContext wac =WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
  14.     DictionaryServiceImpl ds=(DictionaryServiceImpl)wac.getBean("oracledictionaryService");
  15.     String flag = request.getParameter("flag");
  16.     String tableCode = request.getParameter("tableCode");
  17.     String fieldCode = request.getParameter("fieldCode");
  18.     if(flag==null)return;
  19.     if(flag.equals("titles")){
  20.     }else if(flag.equals("details")){
  21.       String draw = request.getParameter("draw");
  22.       String start = request.getParameter("start");
  23.       String length = request.getParameter("length");
  24.       StringBuilder sql = new StringBuilder("select ");
  25.       List titles = this.getTitles(tableCode,fieldCode,ds);
  26.       for(int i=0;i<titles.size();i++){
  27.         Map record = (Map)titles.get(i);      
  28.         sql.append(" ").append(record.get("FIELDNAME")).append(", ");
  29.       }
  30.       if(sql.lastIndexOf(",")>0) sql.deleteCharAt(sql.lastIndexOf(","));
  31.       sql.append(" from ").append(tableCode);
  32.       sql.append(" where 1=1 ");
  33.       String filterSql = getFilterSql(titles,request);
  34.       Integer totalCount =ds.getSqlRecordCount("select count(*) from (" + sql.toString()+ ") tmp");
  35.       Integer filterCount = ds.getSqlRecordCount("select count(*) from (" + sql.toString()+filterSql+ ") tmp");
  36.       String[] strings = fieldCode.split(",");
  37.       String orderSql = getOrderSql(strings,request);
  38.       sql.append(filterSql);
  39.       sql.append(orderSql);
  40.       List<Map> lt = ds.executeSqlToRecordMap(sql.toString(),Integer.valueOf(start),Integer.valueOf(length));
  41.       Map result = new LinkedHashMap();
  42.       result.put("draw", draw);
  43.       result.put("recordsTotal", totalCount);//记录总行数
  44.       result.put("recordsFiltered", filterCount);//过滤的行数   
  45.       int count=Integer.valueOf(length)+1;
  46.       for(Map r : lt){
  47.         r.put("DT_RowId", r.get("id"));//设置行主键
  48.         Map rowDate = new LinkedHashMap();//row data
  49.         rowDate.putAll(r);
  50.         r.put("DT_RowData", rowDate);
  51.         r.put("countInx", count);
  52.         count++;
  53.       }
  54.       result.put("data", lt);
  55.       try {
  56.         convertListToJson(result, response);
  57.       } catch (Exception e1) {
  58.         // TODO Auto-generated catch block
  59.         e1.printStackTrace();
  60.       }
  61.     }
  62.   }
  63.   /**
  64.    * 得到所有的列标题名称
  65.    * @return 
  66.    */
  67.   private List getTitles(String tableCode,String fieldCode,DictionaryServiceImpl ds){
  68.     /*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 ");
  69.     sql.append(" where ODS_TB_CODE= '"+tableCode+"' ");
  70.     List<Map> list = ds.executeSqlToRecordMap(sql.toString());
  71.     return list;*/
  72.     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 ");
  73.     sql.append(" where 1=1 ");
  74.     sql.append(" and ODS_TB_CODE = '"+tableCode+"'");
  75.     sql.append(" and ODS_DF_NAME in (");
  76.     String[] tmp = fieldCode.split(",");
  77.     StringBuilder ids = new StringBuilder();
  78.     for(String t : tmp){
  79.       if(StringUtils.isEmpty(t)) continue;
  80.       ids.append("'").append(t).append("',");
  81.     }
  82.     if(ids.lastIndexOf(",")>0) ids.deleteCharAt(ids.lastIndexOf(","));
  83.     sql.append(ids);
  84.     sql.append(")");    
  85.     List lt = ds.executeSqlToRecordMap(sql.toString());
  86.     return lt;
  87.   }
  88.   /**
  89.    * 前台搜索
  90.    * @param fieldLt
  91.    * @return
  92.    */
  93.   private String getFilterSql(List<Map> fieldLt,HttpServletRequest request) {
  94.     StringBuilder filterSql = new StringBuilder(" and ( ");
  95.     String searchKey = "search[value]";
  96.     String searchValue = request.getParameter(searchKey);
  97.     System.out.println(searchValue);
  98.     if(StringUtils.isEmpty(searchValue)) return "";
  99.     List<String> filterDetail = new ArrayList();
  100.     for(int i=0;i<fieldLt.size();i++){
  101.       Map field = fieldLt.get(i);
  102.       if(field.get("FIELDTYPE").equals("VARCHAR")){
  103.         String subKey = "columns["+i+"][searchable]";    
  104.         if("true".equals(request.getParameter(subKey))){
  105.           String fieldName = field.get("FIELDNAME").toString();
  106.           String subSql = fieldName + " like '%"+searchValue+"%'";
  107.           filterDetail.add(subSql);
  108.         }
  109.       }
  110.     }
  111.     if(filterDetail.size()==0) return "";
  112.     boolean f = true;
  113.     for(String subSql : filterDetail){
  114.       if(f){
  115.         f= false;
  116.         filterSql.append(subSql);
  117.       }else{
  118.         filterSql.append(" OR ").append(subSql);
  119.       }
  120.     }
  121.     filterSql.append(")");
  122.     return filterSql.toString();
  123.   }
  124.   /**
  125.    * 排序
  126.    * @param fieldLt
  127.    * @return
  128.    */
  129.   private String getOrderSql(String[] titles,HttpServletRequest request){
  130.     StringBuilder orderSql = new StringBuilder(" order by ");
  131.     String indexKey = "order[0][column]";
  132.     String dirKey = "order[0][dir]";
  133.     Integer columnIndex = Integer.valueOf(request.getParameter(indexKey));
  134.     String dir = request.getParameter(dirKey);
  135.     if(columnIndex<=titles.length){
  136.       orderSql.append(titles[columnIndex]).append(" ").append(dir);
  137.       return orderSql.toString();
  138.     }
  139.     return "";
  140.   }
  141.   public void convertListToJson(Map map,HttpServletResponse response)throws Exception{
  142.     JSONArray json = JSONArray.fromObject(map); 
  143.     response.setHeader("Cache-Control", "no-cache");
  144.     response.setContentType("text/html; charset=GBK"); 
  145.     PrintWriter writer;
  146.     writer = response.getWriter();
  147.     writer.write(json.get(0).toString());
  148.     writer.close();
  149.   }
  150. }

总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！