1. 使用DataTables的源(CDN地址、本地源文件)
2. DataTables的版本
DataTables 1.10.12
3. 开发语言、框架(Java/NodeJs/PHP、Vue/Ng2/React/JQuery)
java
4. 使用DataTables的配置信息
function creatTable(DTname, url) {
//将创建的表格存放到tables变量中
var tables = $(DTname).DataTable({
//控制分页、搜索、每页显示数量、显示信息等四个插件的dom
//数据传入
"ajax" : {
"url" : url,
"type" : "POST",
"dataType": "json",
"contentType": "application/json; charset=UTF-8",
"data" : JSON.stringify({
"customer_name" : $('#customerName').val() == "" ? null : $('#customerName').val(),
"dealerID": $('#distributor').val() == "" ? null : $('#distributor').val(),
"bus_opp_name" : $('#busOppName').val() == "" ? null : $('#busOppName').val(),
"bus_opp_code": $('#busOppCode').val() == "" ? null : $('#busOppCode').val(),
"reporter" : $('#reporter').val() == "" ? null : $('#reporter').val(),
"bus_opp_status": $('#busOppState').val() == "" ? null : $('#busOppState').val()
})
},
"lengthMenu": [10, 20, 30],
//允许重建
"destroy": true,
//自定义列宽
"bAutoWidth": false,
"dom": "Blfrtip",
"buttons": [
{
"extend": "copy",
"className": "btn-sm"
},
{
"extend": "csv",
"className": "btn-sm"
},
{
"extend": "excel",
"className": "btn-sm"
},
{
"extend": "print",
"className": "btn-sm"
},
],
"responsive": true,
//设置兼容空值
"columnDefs": [
{
"defaultContent": "",
"targets": "_all"
}
],
//设置列数据
"columns": [
{
"data": "customer_name",
"title": "客户名称",
"width":"80px",
},
{
"data": "industry",
"title": "所属行业",
"width":"80px",
},
{
"data": "dealerID",
"title": "所属经销商",
"width":"80px",
},
{
"data": "bus_opp_name",
"title": "商机名称",
"width":"200px",
},
{
"data": "reporter",
"title": "报备人",
"width":"80px",
},
{
"data": "auditor",
"title": "审核人",
"width":"80px",
},
{
"data": "reviewer",
"title": "复核人",
"width":"80px",
},
{
"data": "bus_opp_status",
"title": "商机状态",
"width":"80px",
"render": function (data, type, row) {
switch (data) {
case "0":
return "未审核";
break;
case "1":
return "审核不通过";
break;
case "2":
return "审核通过";
break;
case "3":
return "已驳回";
break;
case "4":
return "已同意";
break;
case "5":
return "已分派";
break;
case "6":
return "未成单";
break;
case "7":
return "签约订单";
break;
}
}
},
],
//设置排序
"order": [[1, 'asc']],
language: {
//将英文转换为中文
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
}
// 此处填写格式化代码
@RequestMapping(value = "/selectBusOpp", method = RequestMethod.POST)
@ResponseBody
public List selectBusOpp(@RequestBody Map bus_opp_map) {
return busOppService.selectBusOpp(bus_opp_map);
}
5. 错误信息或截图
6. 其他你认为可以帮助解决问题的信息
后台接收方式换了单个参数,实体,map等多种接收方式,都无法实现