jquery表格datatables實(shí)例解析 直接加載和延遲加載
更新時(shí)間：2016年08月12日 16:19:41 作者：ilovexiaou
這篇文章主要針對(duì)jquery表格datatables實(shí)例進(jìn)行解析，可以直接加載和延遲加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
參考自官方文檔，需要引入jquery.js，jquery.dataTables.js，dataTables.bootstrap.js（可選）,
由于時(shí)間緊，省略了很多，所以總結(jié)份簡(jiǎn)化版的僅供參考。
1、直接加載，這個(gè)比較簡(jiǎn)單，如下
<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>高新區(qū)名稱</th><th nowrap>地區(qū)</th><th nowrap>工商注冊(cè)企業(yè)數(shù)</th><th nowrap>網(wǎng)址</th><th nowrap>工業(yè)總產(chǎn)值(千元)</th><th nowrap>工業(yè)增加值(千元)</th><th nowrap>主導(dǎo)產(chǎn)業(yè)</th><th nowrap>財(cái)政收入（萬元）</th><th nowrap>財(cái)政支出（萬元）</th></tr></thead><tbody></tbody></table></div>");
$.ajax({
url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳轉(zhuǎn)到 action
data : {
barName : '1'
},
serverSide: true,//服務(wù)器處理
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_ 項(xiàng)結(jié)果",
"sZeroRecords" : "沒有匹配結(jié)果",
"sInfo" : "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
"sInfoEmpty" : "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
"sInfoFiltered" : "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中數(shù)據(jù)為空",
"sLoadingRecords" : "載入中...",
"sInfoThousands" : ",",
"oPaginate" : {
"sFirst" : "首頁",
"sPrevious" : "上頁",
"sNext" : "下頁",
"sLast" : "末頁"
},
"oAria" : {
"sSortAscending" : ": 以升序排列此列",
"sSortDescending" : ": 以降序排列此列"
}
}
});
showPage();
},
error : function() {
alert("異常！");
}
});
showPage();//高度調(diào)節(jié)
}
</script>
后臺(tái)傳個(gè)json就行了，由于這個(gè)破項(xiàng)目表名都很奇葩湊合看吧。
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、延遲加載
由于老項(xiàng)目用的struts1，造成前臺(tái)form接收參數(shù)有問題，所以直接用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,//服務(wù)器處理
"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_ 項(xiàng)結(jié)果",
"sZeroRecords" : "沒有匹配結(jié)果",
"sInfo" : "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
"sInfoEmpty" : "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
"sInfoFiltered" : "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
"sInfoPostFix" : "",
"sSearch" : "搜索:",
"sUrl" : "",
"sEmptyTable" : "表中數(shù)據(jù)為空",
"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>地區(qū)</th>" +
"<th nowrap>工業(yè)總產(chǎn)值（萬元）</th>" +
"<th nowrap>企業(yè)數(shù)（家）</th>" +
"</tr></thead><tbody></tbody></table>" +
"</div>");
//創(chuàng)建表頭
/*$.ajax({
url : urlContextPath+'/mst/DatatablesLazyLoadServlet?flag=titles',// 跳轉(zhuǎn)到 action
data : {
index : ''
},
type : 'post',
success : function(data) {
var dataObj = eval(data);
},
error : function() {
alert("異常！");
}
});*/
//填充數(shù)據(jù)
initDatatables();
}
注：這個(gè)已經(jīng)是簡(jiǎn)化版的了，表頭可以用另一個(gè)ajax傳過來，這里省略直接寫死了。
下面是后臺(tái)部分
public class DatatablesLazyLoad extends HttpServlet{
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.process(request, response);
}
/**
* datatables 延遲加載 數(shù)據(jù)加載，flag標(biāo)注details表示注入數(shù)據(jù)，titles表示注入標(biāo)題。
* @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);//記錄總行數(shù)
result.put("recordsFiltered", filterCount);//過濾的行數(shù)
int count=Integer.valueOf(length)+1;
for(Map r : lt){
r.put("DT_RowId", r.get("id"));//設(shè)置行主鍵
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();
}
}
}
/**
* 得到所有的列標(biāo)題名稱
* @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;
}
/**
* 前臺(tái)搜索
* @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();
}
}
總結(jié)，做的比較急，也沒好好整理下直接貼出來，因?yàn)橐膊浑y，肯定有地方寫的不好，僅供參考。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery Datatables 動(dòng)態(tài)列+跨列合并實(shí)現(xiàn)代碼
- jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】
- jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
- jQuery Datatables表頭不對(duì)齊的解決辦法
- jQuery插件DataTables分頁開發(fā)心得體會(huì)
- JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁
- jQuery中Datatables增加跳轉(zhuǎn)到指定頁功能
- 利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能
- jQuery.datatables.js插件用法及api實(shí)例詳解
- jQuery dataTables與jQuery UI 對(duì)話框dialog的使用教程
- jQuery插件dataTables添加序號(hào)列的方法
- jQuery DataTables插件自定義Ajax分頁實(shí)例解析
- jQuery插件datatables使用教程
- jQuery表格插件datatables用法匯總
- jQuery表格插件datatables用法詳解
- jquery+php實(shí)現(xiàn)導(dǎo)出datatables插件數(shù)據(jù)到excel的方法
- jQuery表格插件datatables用法總結(jié)
- Jquery Datatables的使用詳解
相關(guān)文章
這篇文章主要介紹了Jquery 實(shí)現(xiàn)grid綁定模板的相關(guān)資料,需要的朋友可以參考下2015-01-01
jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的動(dòng)態(tài)塊漂移效果,涉及jQuery基于隨機(jī)數(shù)與時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了jquery.pagination.js分頁使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
jQuery1.3.2 升級(jí)到j(luò)Query1.4.4需要修改的地方
jQuery1.3.2 升級(jí)到 1.4.4 ，需要修改的地方，需要的朋友可以參考下。2011-01-01
jquery form input 選擇，獲取 id為 instanceInfo form 下的 隱藏的input,需要的朋友可以參考下2014-04-04
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來和他一個(gè)table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對(duì)大家有用2011-01-01
jQuery深拷貝Json對(duì)象簡(jiǎn)單示例
這篇文章主要介紹了jQuery深拷貝Json對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法,以簡(jiǎn)單示例形式分析了jQuery深拷貝的操作技巧,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了easyUI下拉列表點(diǎn)擊事件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法
這篇文章主要介紹了jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法,需要的朋友可以參考下2014-06-06
jQuery使用empty()方法刪除元素及其所有子元素的方法
這篇文章主要介紹了jQuery使用empty()方法刪除元素及其所有子元素的方法,涉及jQuery操作元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03