频道导航

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

2019-01-05 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jquery表格datatables实例解析直接加载和延迟加载，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

1、直接加载

，这个比较简单，如下

jsp用了bootstrap的栅格，js如下

id"); $.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();//高度调节 }

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

<div class="jb51code">
<pre class="brush:java;">
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如下

<div class="jb51code">
<pre class="brush: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" : "显示","oPaginate" : {
"sFirst" : "首页","sLast" : "末页"
},"oAria" : {
"sSortAscending" : ": 以升序排列此列","sSortDescending" : ": 以降序排列此列"
}
}
} );
showPage();
}

function showQueryTable(){
//建table
$('#secondtid').remove();
$("#tid").append(
"

" +
"

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

注：

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

<div class="jb51code">
<pre class="brush:java;">
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 <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = 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) <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.deleteCharAt(<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.lastIndexOf(","));
  <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(" from ").append(tableCode);
  <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(" where 1=1 ");
  String filter<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = getFilter<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>(titles,request);
  Integer totalCount =ds.get<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>RecordCount("select count(*) from (" + <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.toString()+ ") tmp");
  Integer filterCount = ds.get<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>RecordCount("select count(*) from (" + <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.toString()+filter<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>+ ") tmp");

  String[] strings = fieldCode.split(",");

  String order<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = getOrder<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>(strings,request);
  <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(filter<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>);
  <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(order<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>);
  List<Map> lt = ds.execute<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>ToRecordMap(<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.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 list = ds.executesqlToRecordMap(sql.toString());
return list;*/

StringBuilder <a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = new StringBuilder("select UPPER(ODS_DF_NAME) fieldName,UPPER(ODS_DF_DATA_TYPE) fieldType from ODS.ODS_DF_INFO_REG ");
<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(" where 1=1 ");
<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(" and ODS_TB_CODE = '"+tableCode+"'");
<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.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(","));
<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(ids);
<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(")");    
List lt = ds.execute<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>ToRecordMap(<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.toString());
return lt;

}

/**

前台搜索
@param fieldLt
@return
*/
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<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 sub<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = fieldName + " like '%"+searchValue+"%'";
 filterDetail.add(sub<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>);
```
}
}
}
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 filter<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.toString();

}

/**

排序
@param fieldLt
@return
*/
private String getOrdersql(String[] titles,HttpServletRequest request){

StringBuilder order<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a> = 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){
  order<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.append(titles[columnIndex]).append(" ").append(dir);
  return order<a href="https://www.jb51.cc/tag/sql/" target="_blank" class="keywords">sql</a>.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();
}
}

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

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

原文链接：https://www.f2er.com/jquery/46617.html

datatables datatables jquery 加载加载加载表格表格表格