需要引入jquery.js，jquery.datatables.js，datatables.bootstrap.js（可选）,
1、直接加载，这个比较简单，如下
<p id="tid" class="col-sm-12 col-md-12">
<p id="secondtid" hidden="hidden"></p>
</p>
jsp用了bootstrap的栅格，js如下
<script type="text/javascript">
function getgaoxinqu() {
$('#secondtid').remove();
$("#tid").append(
"<p 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></p>");
$.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(
"<p 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>" +
"</p>");
//创建表头
/*$.ajax({
url : urlcontextpath+'/mst/datatableslazyloadservlet?flag=titles',// 跳转到 action
data : {
index : ''
},
type : 'post',
success : function(data) {
var dataobj = eval(data);
},
error : function() {
alert("异常！");
}
});*/
//填充数据
initdatatables();
}
注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分
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();
}
}
以上就是jquery表格直接加载和延迟加载代码实例详解的详细内容。