文档章节

前端那些事之dataTable篇

上官清偌
 上官清偌
发布于 2017/03/03 13:02
字数 605
阅读 313
收藏 2

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

}

 

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 87
码字总数 123753
作品 0
浦东
程序员
私信 提问
jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时,jQuery Datatable强大的功能支持:排序,分页,搜索等。 Query Datatable能良好支持数据完...

sgyyz
2014/05/08
0
0
C#中datatable去重的方法

这篇文章主要介绍了C#中datatable去重的方法,通过两种不同的方法对比分析了datatable去重的技巧,非常具有实用价值,需要的朋友可以参考下 这里主要介绍两种方法: 1 数据库直接去除重复 sele...

donny945
2014/10/27
0
0
基于VUE自定义指令实现按钮级权限控制

前言:关于权限的那些事!!! 路由权限可参看这位大神写的,很全面==>手摸手,带你用vue撸后台 系列二(登录权限篇) 思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之...

lixinchao
2018/05/23
0
0
自己总结的,输出到前端JSON的几种方法

第一种:利用MODEL拼成要输出JSON的对象。再用JSON.NET转成JSON输出到前端(这种常用,就不举例了。) 第二种:利用table拼成JSON数据格式,再用JSON.NET转成JSON输出到前端: dt = new Dat...

Xanthus博客
2018/08/06
0
0
后端代码功能函数整理

输出到前端作为选择项目的时候,直接调用 SelectHelper.Source(, "", "控件值的DataColumn.Name");

TONY-GU
2017/06/16
1
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx反向代理配置去除前缀

使用nginx做反向代理的时候,可以简单的直接把请求原封不动的转发给下一个服务。设置proxy_pass请求只会替换域名,如果要根据不同的url后缀来访问不同的服务,则需要通过如下方法: 方法一:...

架构师springboot
16分钟前
1
0
QianBill API 开发笔记

JWT

BeanHo
28分钟前
2
0
Elasticsearch实战篇——Spring Boot整合ElasticSearch

当前Spring Boot很是流行,包括我自己,也是在用Spring Boot集成其他框架进行项目开发,所以这一节,我们一起来探讨Spring Boot整合ElasticSearch的问题。 本文主要讲以下内容: 第一部分,通...

JAVA_冯文议
37分钟前
3
0
不错的linux下通用的java程序启动脚本

#!/bin/sh#该脚本为Linux下启动java程序的通用脚本。即可以作为开机自启动service脚本被调用,#也可以作为启动java程序的独立脚本来使用。##Author: tudaxia.com, Date: 2011/6/7...

sprouting
今天
3
0
Linux manjaro系统安装后无法连接wifi,解决方案

笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动,如下,如果没有Kernel driver in use,说明缺少驱动。 05:00.0 Network controller: Realtek Semiconducto...

bluecoffee
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部