javadatatable⽤法_DataTable初次使⽤基于Java后台DataTable初次使⽤基于Java后台
环境：Java后台，MySql数据库，DataTable版本3.1.0，Mac Pro Book,EL Capitan
业务场景：多条件混合服务端分页查询产品
HTML代码部分
批操作
产品名称类别品牌产品状态创建时间最后更新JS代码部分
var allltable = $("#all_TabGrid");
allltable.DataTable({
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();
}
},
info:true,
//"iDisplayLength" : 40,
"paging": true,
"ordering": false,
/
/"deferRender": true,
"columns": [
{"data":"ID","render":function (data, type, full, meta) {
return " ";
}},
{"data": "null","render":function (data, type, full, meta) {
return "";
}},
{"data": "NAME"},
{"data": "PRODUCTKINDNAME"},
{"data": "BRANDNAME"},
{"data": "STATENAME"},
{"data": "FORMATEDATE"},
{"data": "FORMATELASTUPDATE"}
],
"processing": true,
"serverSide": true,
"searching": false,
//"pagingType": "simple_numbers",
"dom": 'rt>',
"language": {
"url": "/ProductWeb/js/datatables/plugins/Chinese.json"
}
});
var alltableWrapper = jQuery('#all_TabGrid_wrapper');
allltable.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).prop("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).prop("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
Java后台代码public class ProductServlet extends ServletChannel {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int pageNo = Integer.Parameter("pageNo"));
int pageSize = Integer.Parameter("length"));
int dr = Integer.Parameter("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",Items());
result.put("draw",dr);
result.put("recordsTotal",TotalCount());
result.put("recordsFiltered",TotalCount());
JSONString(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 p
ageNo = Integer.Parameter("pageNo"))；来获得值，这⾥的pageNo是值当前的页数，d.NAME、d.LINKMOBILE、｀d.CODE｀为后台的接收参数，
int pageSize = Integer.Parameter("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();
}mysql下载后的初次使用
}
还是把你要查询的字段放到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().load()；就可以看到结果了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。