datatables 配套bootstrap样式使用小结（2） ajax篇-爱编程
datatables 配套bootstrap样式使用小结（2） ajax篇
距离上一篇有点时间了，周末做了伴郎参加了一个土豪同学的婚礼。
上一篇是介绍一下基本的用法，基本的原理是取出所有的数据，然后调用$.datatables(option)方法格式化，这种方法显然不太科学，所以ajax方式是必须的。
首先上个效果图。
js和css引用方面依旧没有变化，详见上篇。
ViewBag.Title = "DataTableServer";
//两种身份
List&SelectListItem& discriminatorTypes = new List&SelectListItem&()
new SelectListItem(){Text="身份类型",Value = ""},
new SelectListItem(){Text = "学生",Value ="Student"},
new SelectListItem(){Text="导师",Value="Instructor"}
&div class="hidden" id="hidden_filter"&
@* 把需要搜索的条件放到hidden里面，在table格式化完成的时候直接调用$.html()赋值，免去了在js拼接标签的麻烦 *@
&div class="row" style="margin-right:0;"&
@Html.DropDownList("disType", discriminatorTypes, new { @class = "form-control input-small", style = "width:120px" })
@Html.TextBox("name", "", new { @class = "form-control input-small", style = "width:150px", placeholder = "请输入姓名" })
&button id="go_search" class="btn btn-default"&搜索&/button&
&div class="panel panel-default"&
&div class="panel-heading"&
&div class="panel-title"&
Ajax 异步获取数据
&div class="panel-body"&
&table id="table_server" class="table table-bordered table-striped table-hover"&
&th&ID&/th&
&th&姓名&/th&
&th&入职时间&/th&
&th&身份&/th&
&th&操作&/th&
页面定义上table里面只需要定义thead即可。
&script type="text/javascript"&
$(function () {
var tablePrefix = "#table_server_";
$("#table_server").dataTable({
serverSide: true,//分页，取数据等等的都放到服务端去
processing: true,//载入数据的时候是否显示&载入中&
pageLength: 10,//首次加载的数据条数
ordering: false,//排序操作在服务端进行，所以可以关了。
ajax: {//类似jquery的ajax参数，基本都可以用。
type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
url: "@Url.Action("GetPeoples")",
dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
var param = {};//因为服务端排序，可以新建一个参数对象
param.start = d.//开始的序号
param.length = d.//要取的数据的
var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组
formData.forEach(function (e) {
param[e.name] = e.
return//自定义需要传递的参数。
columns: [//对应上面thead里面的序列
{ data: "id", },//字段名字和返回的json序列的key对应
{ data: "name", },
//Student 没有hireDate
data: function (e) {
if (e.hireDate) {//默认是/Date()/格式，需要显示成年月日方式
return new Date(Number(e.hireDate.replace(/\D/g, ''))).toLocaleDateString();
return "空";
{ data: "discriminator", },
data: function (e) {//这里给最后一列返回一个操作列表
//e是得到的json数组中的一个item ，可以用于控制标签的属性。
return '&a class="btn btn-default btn-xs show-detail-json"&&i class="icon-edit"&&/i&显示详细&/a&';
initComplete: function (setting, json) {
//初始化完成之后替换原先的搜索框。
//本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。
$(tablePrefix + "filter").html("&form id='filter_form'&" + $("#hidden_filter").html() + "&/form&");
language: {
lengthMenu: '&select class="form-control input-xsmall"&' + '&option value="5"&5&/option&' + '&option value="10"&10&/option&' + '&option value="20"&20&/option&' + '&option value="30"&30&/option&' + '&option value="40"&40&/option&' + '&option value="50"&50&/option&' + '&/select&条记录',//左上角的分页大小显示。
processing: "载入中",//处理页面数据的时候的显示
paginate: {//分页的样式文本内容。
previous: "上一页",
next: "下一页",
first: "第一页",
last: "最后一页"
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
//$("#table_server_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。
$(document).on("submit", "#filter_form", function () {
return false;
$(document).on("click", "#go_search", function () {
$("#table_server").DataTable().draw();//点搜索重新绘制table。
$(document).on("click", ".show-detail-json", function () {//取出当前行的数据
alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
上面主要包含两个点，一个是自定义右上角的filter对象，要在table初始化完成的回调函数里面加载方法；第二个是调用DataTable API对象的draw方法，实现重新加载。
最后想说的是标签的绑定事件要放到document或者其他父标签上，因为元素是在datatable方法加载完成之后才显示出来的。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。参考自官方文档，需要引入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&");
url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳转到 action
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 ODS";
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)
//-- 列定义
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,
"url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
"type": "POST",
"data": function ( d ) {
var queryForm = document.queryConditionF
d['fieldCode'] = 'ID,YEAR,REGION,GYZCZ,QYS';
d['tableCode'] = 'ODS'; //表名
"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(){
$('#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
index : ''
type : 'post',
success : function(data) {
var dataObj = eval(data);
error : function() {
alert("异常！");
//填充数据
initDatatables();}注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。 下面是后台部分public class DatatablesLazyLoad extends HttpServlet{
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)
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);
result.put("data", lt);
convertListToJson(result, response);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
* 得到所有的列标题名称
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());*/
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))
ids.append("'").append(t).append("',");
if(ids.lastIndexOf(",")&0) ids.deleteCharAt(ids.lastIndexOf(","));
sql.append(ids);
sql.append(")");
List lt = ds.executeSqlToRecordMap(sql.toString());
* 前台搜索
* @param fieldLt
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 =
for(String subSql : filterDetail){
filterSql.append(subSql);
filterSql.append(" OR ").append(subSql);
filterSql.append(")");
return filterSql.toString();
* @param fieldLt
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/ charset=GBK");
writer = response.getWriter();
writer.write(json.get(0).toString());
writer.close();
}}总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。就爱阅读网友整理上传,为您提供最全的知识大全,期待您的分享，转载请注明出处。
欢迎转载：
推荐： 　　　网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
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&
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&");
url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳转到 action
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就行了，由于这个破项目表名都很奇葩凑合看吧。
List&GaoXinDistrict& gxlist=new ArrayList&GaoXinDistrict&();
String sql="select * from ODS";
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)
//-- 列定义
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,
"url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
"type": "POST",
"data": function ( d ) {
var queryForm = document.queryConditionF
d['fieldCode'] = 'ID,YEAR,REGION,GYZCZ,QYS';
d['tableCode'] = 'ODS'; //表名
"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(){
$('#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
index : ''
type : 'post',
success : function(data) {
var dataObj = eval(data);
error : function() {
alert("异常！");
//填充数据
initDatatables();
注：这个已经是简化版的了，表头可以用另一个ajax传过来，这里省略直接写死了。
下面是后台部分
public class DatatablesLazyLoad extends HttpServlet{
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)
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);
result.put("data", lt);
convertListToJson(result, response);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
* 得到所有的列标题名称
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());
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))
ids.append("'").append(t).append("',");
if(ids.lastIndexOf(",")&0) ids.deleteCharAt(ids.lastIndexOf(","));
sql.append(ids);
sql.append(")");
List lt = ds.executeSqlToRecordMap(sql.toString());
* 前台搜索
* @param fieldLt
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 =
for(String subSql : filterDetail){
filterSql.append(subSql);
filterSql.append(" OR ").append(subSql);
filterSql.append(")");
return filterSql.toString();
* @param fieldLt
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/ charset=GBK");
writer = response.getWriter();
writer.write(json.get(0).toString());
writer.close();
总结，做的比较急，也没好好整理下直接贴出来，因为也不难，肯定有地方写的不好，仅供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]}