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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
jQuery select控制插件
Aug 17 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
实测jquery data()如何存值
Aug 18 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
react的hooks的用法详解
Oct 12 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
Home Coffee Roasting
2021/03/03 咖啡文化
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
jQuery设计思想
2017/03/07 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python设置环境变量的原因和方法
2019/06/24 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python字节单位转换实例
2019/12/05 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
班长岗位职责
2013/11/10 职场文书
文秘个人求职信范文
2014/04/22 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
现役军人家属慰问信
2015/03/24 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Python函数式编程中itertools模块详解
2021/09/15 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server