jquery表格datatables实例解析 直接加载和延迟加载
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要针对jquery表格datatables实例进行解析，可以直接加载和延迟加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
参考自官方文档，需要引入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传过来，这里省略直接写死了。
狼蚁网站SEO优化是后台部分
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();
}
}
总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。