前端那些事之dataTable篇

2019独角兽企业重金招聘Python工程师标准>>>

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);//实现表格的渲染
	})

}

 

转载于:https://my.oschina.net/yongxinke/blog/850284