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


Posted in Javascript onAugust 12, 2016

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

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

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

jsp用了bootstrap的栅格,js如下

<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>

后台传个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(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、延迟加载
由于老项目用的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 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();
}

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
简单的三步vuex入门
May 20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
viewer.js实现图片预览功能
Jun 24 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
十天学会php(1)
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
JS解析XML的实现代码
2009/11/12 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python学习笔记之多进程
2020/08/06 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
安徽导游词
2015/02/12 职场文书
电影复兴之路观后感
2015/06/02 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang