jquery表格datatables实例解析 直接加载和延迟加载
参考自官方文档，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可选）,
由于时间紧，省略了很多，所以总结份简化版的仅供参考。
1、直接加载，这个比较简单，如下
<divid="tid"class="col-sm-12col-md-12"> <divid="secondtid"hidden="hidden"></div> </div>
jsp用了bootstrap的栅格，js如下
<scripttype="text/javascript">
functiongetgaoxinqu(){
$('#secondtid').remove();
$("#tid").append(
"<divid='secondtid'style='width:100%;'><tableid='table_id'class='tabletable-stripedtable-borderedtable-hoverno-footerdataTabledisplay'><thead><tr><thnowrap>id</th><thnowrap>高新区名称</th><thnowrap>地区</th><thnowrap>工商注册企业数</th><thnowrap>网址</th><thnowrap>工业总产值(千元)</th><thnowrap>工业增加值(千元)</th><thnowrap>主导产业</th><thnowrap>财政收入（万元）</th><thnowrap>财政支出（万元）</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){
vardataObj=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=newArrayList<GaoXinDistrict>();
Stringsql="select*fromODS10000060";
try{
List<Map>list=oracledictionaryService.executeSqlToRecordMap(sql);
for(Mapmap:list){
GaoXinDistrictgx=newGaoXinDistrict();
Objectid=map.get("ID");
Objectname=map.get("NAME");
ObjectJB=map.get("JB");
ObjectDY=map.get("DY");
ObjectYEAR=map.get("YEAR");
ObjectFZR=map.get("FZR");
ObjectTBR=map.get("TBR");
Objectphone=map.get("PHONE");
ObjectEMAIL=map.get("EMAIL");
ObjectWWW=map.get("WWW");
ObjectGXQMJSUM=map.get("GXQMJSUM");
ObjectJCMJ=map.get("JCMJ");
ObjectGXQYY=map.get("GXQYY");
ObjectGYSUM=map.get("GYSUM");
ObjectGYADD=map.get("GYADD");
ObjectCZTR=map.get("CZTR");
ObjectCZZC=map.get("CZZC");
ObjectDEC=map.get("DEC");
ObjectZDCY=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(Exceptione){
e.printStackTrace();
}
2、延迟加载
由于老项目用的struts1，造成前台form接收参数有问题，所以直接用servlet接收
前端jsp如1直接加载一样，js如下
functioninitDatatables(){
/*varcolumns=newArray();
$("#listTabletheadth").each(function(index,element){
varfieldName=$(element).attr("fieldName");
if(fieldName.indexOf('.')>0)fieldName=fieldName.substring(2);
columns.push({"data":fieldName});
});
if($('#listTable').length<=0)return;
//--列定义
varcolumnDefs=newArray();
$("#listTabletheadth").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){
varqueryForm=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();
}
functionshowQueryTable(){
//建table
$('#secondtid').remove();
$("#tid").append(
"<divid='secondtid'style='width:100%;'>"+
"<tableid='listTable'class='tabletable-stripedtable-borderedtable-hoverno-footerdataTabledisplay'><thead><tr>"+
"<thnowrap>id</th>"+
"<thnowrap>年份</th>"+
"<thnowrap>地区</th>"+
"<thnowrap>工业总产值（万元）</th>"+
"<thnowrap>企业数（家）</th>"+
"</tr></thead><tbody></tbody></table>"+
"</div>");
//创建表头
/*$.ajax({
url:urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',//跳转到action
data:{
index:''
},
type:'post',
success:function(data){
vardataObj=eval(data);
},
error:function(){
alert("异常！");
}
});*/
//填充数据
initDatatables();
}
注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分
publicclassDatatablesLazyLoadextendsHttpServlet{
@Override
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.process(request,response);
}
/**
*datatables延迟加载数据加载，flag标注details表示注入数据，titles表示注入标题。
*@paramrequest
*@paramresponse
*/
privatevoidprocess(HttpServletRequestrequest,HttpServletResponseresponse){
ServletContextservletContext=request.getSession().getServletContext();
WebApplicationContextwac=WebApplicationContextUtils.getRequiredWebApplicationContext(servletContext);
DictionaryServiceImplds=(DictionaryServiceImpl)wac.getBean("oracledictionaryService");
Stringflag=request.getParameter("flag");
StringtableCode=request.getParameter("tableCode");
StringfieldCode=request.getParameter("fieldCode");
if(flag==null)return;
if(flag.equals("titles")){
}elseif(flag.equals("details")){
Stringdraw=request.getParameter("draw");
Stringstart=request.getParameter("start");
Stringlength=request.getParameter("length");
StringBuildersql=newStringBuilder("select");
Listtitles=this.getTitles(tableCode,fieldCode,ds);
for(inti=0;i<titles.size();i++){
Maprecord=(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("where1=1");
StringfilterSql=getFilterSql(titles,request);
IntegertotalCount=ds.getSqlRecordCount("selectcount(*)from("+sql.toString()+")tmp");
IntegerfilterCount=ds.getSqlRecordCount("selectcount(*)from("+sql.toString()+filterSql+")tmp");
String[]strings=fieldCode.split(",");
StringorderSql=getOrderSql(strings,request);
sql.append(filterSql);
sql.append(orderSql);
List<Map>lt=ds.executeSqlToRecordMap(sql.toString(),Integer.valueOf(start),Integer.valueOf(length));
Mapresult=newLinkedHashMap();
result.put("draw",draw);
result.put("recordsTotal",totalCount);//记录总行数
result.put("recordsFiltered",filterCount);//过滤的行数
intcount=Integer.valueOf(length)+1;
for(Mapr:lt){
r.put("DT_RowId",r.get("id"));//设置行主键
MaprowDate=newLinkedHashMap();//rowdata
rowDate.putAll(r);
r.put("DT_RowData",rowDate);
r.put("countInx",count);
count++;
}
result.put("data",lt);
try{
convertListToJson(result,response);
}catch(Exceptione1){
//TODOAuto-generatedcatchblock
e1.printStackTrace();
}
}
}
/**
*得到所有的列标题名称
*@return
*/
privateListgetTitles(StringtableCode,StringfieldCode,DictionaryServiceImplds){
/*StringBuildersql=newStringBuilder("selectUPPER(ODS_DF_NAME)fieldName,ODS_DF_CN_NAMEfieldLabel,ODS_DF_CODEfieldCode,UPPER(ODS_DF_DATA_TYPE)fieldTypefromODS.ODS_DF_INFO_REG");
sql.append("whereODS_TB_CODE='"+tableCode+"'");
List<Map>list=ds.executeSqlToRecordMap(sql.toString());
returnlist;*/
StringBuildersql=newStringBuilder("selectUPPER(ODS_DF_NAME)fieldName,ODS_DF_CN_NAMEfieldLabel,ODS_DF_CODEfieldCode,UPPER(ODS_DF_DATA_TYPE)fieldTypefromODS.ODS_DF_INFO_REG");
sql.append("where1=1");
sql.append("andODS_TB_CODE='"+tableCode+"'");
sql.append("andODS_DF_NAMEin(");
String[]tmp=fieldCode.split(",");
StringBuilderids=newStringBuilder();
for(Stringt:tmp){
if(StringUtils.isEmpty(t))continue;
ids.append("'").append(t).append("',");
}
if(ids.lastIndexOf(",")>0)ids.deleteCharAt(ids.lastIndexOf(","));
sql.append(ids);
sql.append(")");
Listlt=ds.executeSqlToRecordMap(sql.toString());
returnlt;
}
/**
*前台搜索
*@paramfieldLt
*@return
*/
privateStringgetFilterSql(List<Map>fieldLt,HttpServletRequestrequest){
StringBuilderfilterSql=newStringBuilder("and(");
StringsearchKey="search[value]";
StringsearchValue=request.getParameter(searchKey);
System.out.println(searchValue);
if(StringUtils.isEmpty(searchValue))return"";
List<String>filterDetail=newArrayList();
for(inti=0;i<fieldLt.size();i++){
Mapfield=fieldLt.get(i);
if(field.get("FIELDTYPE").equals("VARCHAR")){
StringsubKey="columns["+i+"][searchable]";
if("true".equals(request.getParameter(subKey))){
StringfieldName=field.get("FIELDNAME").toString();
StringsubSql=fieldName+"like'%"+searchValue+"%'";
filterDetail.add(subSql);
}
}
}
if(filterDetail.size()==0)return"";
booleanf=true;
for(StringsubSql:filterDetail){
if(f){
f=false;
filterSql.append(subSql);
}else{
filterSql.append("OR").append(subSql);
}
}
filterSql.append(")");
returnfilterSql.toString();
}
/**
*排序
*@paramfieldLt
*@return
*/
privateStringgetOrderSql(String[]titles,HttpServletRequestrequest){
StringBuilderorderSql=newStringBuilder("orderby");
StringindexKey="order[0][column]";
StringdirKey="order[0][dir]";
IntegercolumnIndex=Integer.valueOf(request.getParameter(indexKey));
Stringdir=request.getParameter(dirKey);
if(columnIndex<=titles.length){
orderSql.append(titles[columnIndex]).append("").append(dir);
returnorderSql.toString();
}
return"";
}
publicvoidconvertListToJson(Mapmap,HttpServletResponseresponse)throwsException{
JSONArrayjson=JSONArray.fromObject(map);
response.setHeader("Cache-Control","no-cache");
response.setContentType("text/html;charset=GBK");
PrintWriterwriter;
writer=response.getWriter();
writer.write(json.get(0).toString());
writer.close();
}
}
总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。