ajax和dataTable插件和layui实现数据的渲染
var $form;
var form;
var $;
var layer;
var laytpl;
var myTable;
var provider;
var item;
var policy;
var institution;
var type;
var pay;
// 传输列表的参数
layui.use([ 'element', 'layer', 'form', 'layedit', 'laydate', 'laypage', 'laytpl', 'datatable' ], function() {
$ = layui.jquery, layer = layui.layer, element = layui.element(), form = layui.form(), layedit = layui.layedit, laydate = layui.laydate, laytpl = layui.laytpl, laypage = layui.laypage;
// 供应商比例
var start = {
max : '2099-06-16 23:59:59',
istoday : false,
choose : function(datas) {
end.min = datas; // 开始日选好后,重置结束日的最小日期
end.start = datas // 将结束日的初始值设定为开始日
}
};
var end = {
max : '2099-06-16 23:59:59',
istoday : false,
choose : function(datas) {
start.max = datas; // 结束日选好后,重置开始日的最大日期
}
};
document.getElementById('start').onclick = function() {
start.elem = this;
laydate(start);
}
document.getElementById('end').onclick = function() {
end.elem = this;
laydate(end);
}
// 渲染表格数据
myTable = $('#taskTable').DataTable({
"processing" : true,
"language" : lang, // 提示信息
"autoWidth" : false, // 自适应宽度,
"lengthMenu" :false,
"stripeClasses" : [ "odd", "even" ], // 为奇偶行加上样式,兼容不支持CSS伪类的场合
"searching" : false, // 是否允许Datatables开启本地搜索
"paging" : true, // 是否开启本地分页
"lengthChange" : true, // 是否允许产品改变表格每页显示的记录数
"info" : true, // 控制是否显示表格左下角的信息
// 跟数组下标一样,第一列从0开始,这里表格初始化时,第四列默认降序
"ordering" : false,
// "order": [1, 'desc'], //asc升序 desc降序
"aoColumnDefs" : [ {
"orderable" : false,
"aTargets" : [ 0, 0, 0 ]
// 指定列不参与排序
} ],
"deferRender" : true, // 延迟渲染
"ajax" : {
url : OrderApi.orderQuery
}, // 数据的路径
"columns" : [ {
"data" : "salvationOrderId",
"sTitle" : "救援单号",
"className" : 'task-id',
"sDefaultContent" : ""
}, {
"data" : "carMark",
"sTitle" : "车牌号",
"sDefaultContent" : "",
}, {
"data" : "policyNo",
"sTitle" : "保单号",
"sDefaultContent" : "",
}, {
"data" : "reportTelephone",
"sTitle" : "申请人手机号",
"sDefaultContent" : "",
}, {
"data" : "salvationCompanyId",
"sTitle" : "供应商",
"sDefaultContent" : "",
}, {
"data" : "salvationType",
"sTitle" : "救援项目",
"sDefaultContent" : "",
}, {
"data" : "payScale",
"sTitle" : "付费比例",
"sDefaultContent" : "",
}, {
"data" : "depCode",
"sTitle" : "机构代码",
"sDefaultContent" : "",
}, {
"data" : "applicationBusinessType",
"sTitle" : "保单属性",
"sDefaultContent" : "",
}, {
"data" : "succorType",
"sTitle" : "救援类型",
"sDefaultContent" : "",
}, {
"data" : "salvationAmount",
"sTitle" : "收费价格",
"sDefaultContent" : "",
}, {
"sTitle" : "救援状态",
"data" : "salvationState",
"sDefaultContent" : ""
},
]
});
myTable.on('draw.dt', function() {
layerMsg('查询成功', 1);
});
// 清空
$("#btn-reset").on('click', function() {
location.reload();
});
});
// 绑定查询条件
function bindQuery() {
// 监听供应商名称
form.on('select(oreder-provider)', function(data) {
provider = data.value;
});
// 救援项目
form.on('select(order-item)', function(data) {
item = data.value;
});
// 保单属性
form.on('select(order-policy)', function(data) {
policy = data.value;
});
// 机构代码
form.on('select(order-institution)', function(data) {
institution = data.value;
});
// 救援类型
form.on('select(order-type)', function(data) {
type = data.value;
});
// 付费比例
form.on('select(order-play)', function(data) {
pay = data.value;
});
}
// 点击查询提交
function querySubmit() {
$(document).on("click", "#btn-query", function() {
result.salvationCompanyId = provider;
result.salvationType = item;
result.applicationBusinessType = policy;
result.startTime = $("#start").val();
result.endTime = $("#end").val();
result.depCode = institution;
result.ruleCode = $("#order-serial").val();
result.succorType = type;
result.payScale = pay;
var params = "?info=" + JSON.stringify(result);
myTable.ajax.url(OrderApi.orderQuery + params).load(null, true);//实现表格的渲染
})
}