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

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

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

jsp用了bootstrap的栅格，js如下

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

List gxlist=new ArrayList();
      String sql="select * from ODS10000060";
      try {
 List 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(){
  

  $('#listTable').DataTable( {
    "processing": true,//处理中显示
    "serverSide": true,//服务器处理 
    "sScrollY": 300,
    "sScrollX": "100%", 
    "columns":[{"data":"ID"},{"data":"YEAR"},{"data":"REGION"},{"data":"GYZCZ"},{"data":"QYS"}],
    
    
//   "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(
   "" +
   "" +
   "" +
   "" +
   "" +
   "" +
   "" +
   "id 年份 地区 工业总产值（万元） 企业数（家）
" +
   "");
  //创建表头 
  
  //填充数据
  initDatatables();
}

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

public class DatatablesLazyLoad extends HttpServlet{
  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.process(request, 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;i0) 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 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();
      }
    }
  }

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

  
  private String getFilterSql(List 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 filterDetail = new ArrayList();
    for(int i=0;i

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


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

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

JavaScript相关栏目本月热门文章

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