DataTable首次使用基于Java的后台
环境： Java后台、MySql数据库、datatable3.1. 0版、Mac Pro Book、EL Capitan
业务场景：多条件混合服务端寻呼查询产品
HTML代码部分
批处理操作
删除
摆在架子上
从架子上下来
备注
产品名称类别品牌产品状态创建时间上次更新JS代码部分varallltable=$('#all_tabgrid ' )；
allltable.DataTable({ (
ajax: {
' URL ' : ' /产品web/servlet /产品servlet '，
'类型' : '开机自检'，
' data ' :功能(d ) {
d.pageno=$('#all_tabgrid ' ).DataTable ).page ) 1；
d.name=$('#searchstoreval ' ).val )；
d.link mobile=$ (' # searchstoretelval ' ).val )、
d.code=$('#searchstorecodeval ' ).val )；
}
(，
info:true，
//'iDisplayLength' : 40，
' paging': true，
' ordering': false，
//'deferRender': true，
' columns': [
{'data':'ID '，' render':function(data，type，full，meta ) }
返回' '；
}、
{'data': 'null '，' render':function(data，type，full，meta ) }
返回' '；
}、
{'data': 'NAME'}是一个，
{'data': 'PRODUCTKINDNAME'}，
{'data': 'BRANDNAME'}是一个，
{'data': 'STATENAME'}，
{'data': 'FORMATEDATE'}，
{ ' data ' : ' formate last update ' }
]、
“处理”: true，
“服务器侧”: true，
' searching': false，
//' paging type ' : ' simple _ numbers '，
' dom': 'rt '，
“语言”:
' URL ' : '/product web/js/datatables/plugins/Chinese.JSON '
}
)；
varalltablewrapper=jquery (' # all _ tab grid _ wrapper '；
所有表. find ('.group-checkable ' ).change(function ) )。
varset=jquery(this ).attr )数据集)；
varchecked=jquery(this ).is ) :checked )；
juery(set ).each (功能) ) {
已选中if {
$(this ).prop ) ' checked '，true；
$(this ).Parents ) (tr ).addclass ) ) active )；
} else {
$(this ).prop ('已检查'，false )；
$(this ).Parents('tr ).removeclass ) ) active )；
}
)；
jquery.uniform.update(set；
)；
Java后台代码publicclassproductservletextendsservletchannel {
protectedvoiddopost (httpservletrequestrequest，http服务器响应) throws ServletException，IOException {
int pageno=integer.value of (request.getparameter (' pageno ' )；
int pagesize=integer.value of (request.getparam
eter("length"));int dr = Integer.valueOf(request.getParameter("draw"));
HashMap param = new HashMap<>(4);
param.put("ISDEL", 0);
SystemCommonVO vo = new SystemCommonVO();
vo.setSQLStatement("ProductWeb.queryProductByProperties", param);
vo.setUseCache(false);
commandContext.clear();
commandContext.setSystemName("foodClient");
commandContext.setServiceName("foodClientService");
commandContext.setCommandName("getSystemCommonVOs");
commandContext.setCommandParams(new Object[]{ vo, pageNo, pageSize },
new Class[]{ SystemCommonVO.class, Integer.class, Integer.class });
SystemPage resultdata = (SystemPage) executeCommandContext().getResult();
HashMap result = new HashMap<>();
result.put("data",resultdata.getItems());
result.put("draw",dr);
result.put("recordsTotal",resultdata.getTotalCount());
result.put("recordsFiltered",resultdata.getTotalCount());
outPrintn(JSON.toJSONString(result, SerializerFeature.WriteMapNullValue), false, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
实现功能:
通过调用Servlet分页查询数据，DataTable的属性serverSide设置为true.
ajax: {
"url": "/ProductWeb/servlet/ProductServlet",
"type": "POST",
"data": function (d) {
d.pageNo = $("#all_TabGrid").DataTable().page()+1;
d.NAME = $("#searchStoreVal").val();
d.LINKMOBILE = $("#searchStoreTelVal").val(),
d.CODE = $("#searchStoreCodeVal").val();
}
}
其中的url为servlet的地址，type指的是你希望通过post还是get方式去掉用查询， data函数中有个参数我用d表示了,其中d.pageNo(当前页数，默认第一页为0，因为博主的后台框架限制，只能在当前页数上加1，因为博主的后台框架第一页查询的数值就是1)是后台接收的参数名，你可以在后台通过int pageNo = Integer.valueOf(request.getParameter("pageNo"));来获得值,这里的pageNo是值当前的页数，d.NAME、d.LINKMOBILE、｀d.CODE｀为后台的接收参数，
int pageSize = Integer.valueOf(request.getParameter("length"));为每页展示的条数，这几个条件构成了分页多条件混合查询。
"language": {
"url": "/ProductWeb/js/datatables/plugins/Chinese.json"
}这是国际化的方法。
查询条件变了之后怎么动态刷新呢？ajax: {
"url": "/ProductWeb/servlet/ProductServlet",
"type": "POST",
"data": function (d) {
d.pageNo = $("#all_TabGrid").DataTable().page()+1;
d.NAME = $("#searchStoreVal").val();
d.LINKMOBILE = $("#searchStoreTelVal").val(),
d.CODE = $("#searchStoreCodeVal").val();
}
}
还是把你要查询的字段放到data中，例如
ajax: {
"url": "/ProductWeb/servlet/ProductServlet",
"type": "POST",
"data": function (d) {
d.pageNo = $("#all_TabGrid").DataTable().page()+1;
d.NAME = $("#searchStoreVal").val();
d.LINKMOBILE = $("#searchStoreTelVal").val(),
d.CODE = $("#searchStoreCodeVal").val();
d.ID = $("#searchStoreIDVal").val();
d.AGE = $("#searchStoreAgeVal").val();
d.Address = $("#searchStoreAddressVal").val();
}
}
然后你需要执行$("#all_TabGrid").DataTable().ajax.reload();就可以看到结果了。