layui完整的table表格加载数据案例，包括搜索、刷新、分页、计算整列数据总值等

layui完整的table表格加载数据案例，包括搜索、刷新、分页、计算整列数据总值等

<form class="layui-form">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">订单时间：</label>
			<div class="layui-input-inline">
				<input type="text" name="datebegin" class="layui-input" id="datebegin" placeholder="开始日期">
			</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline">
				<input type="text" name="dateend" class="layui-input" id="dateend" placeholder="终止日期">
			</div>
		</div>
		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-submit lay-filter="serach"><i class="layui-icon"></i>查询</button>
	</div>
</form>
<table class="layui-table" lay-filter="tableData">
	<thead>
		<tr>
			<th lay-data="{field:'id',width:50, align:'center'}">ID</th>
			<th lay-data="{field:'creatTime',width:200, align:'center'}">订单时间</th>
			<th lay-data="{field:'number',width:200, align:'center'}">订单编号</th>
			<th lay-data="{field:'money',width:150, align:'center'}">实付金额</th>
			<th lay-data="{field:'realMoney',width:150, align:'center'}">商户收入</th>
			<th lay-data="{field:'way',align:'center'}">付款渠道</th>
		</tr>
	</thead>
</table>
<script type="text/javascript">
	var tableOptions = {
		url: '{:url("@compute/data")}', //后端请求数据地址
		method: 'GET', //方式
		id: 'tabelReload', //生成table的标识id，必须提供，用于搜索刷新操作
		page: true, //是否分页
		limit: 30, //每页显示多少条数据
		where: {
			type: "all"
		},
		done: function(res, curr, count) {
			//计算金额
			var sumMoney = 0;
			for(var i = 0; i < count; i++) {
				sumMoney += Number(res.data[i].money);
			}
			$("#sumMoney").text(sumMoney.toFixed(2));
		}
	};
 
	layui.use(['form', 'layedit', 'table', 'laydate', 'element'], function() {
		var form = layui.form,
			layer = layui.layer,
			layedit = layui.layedit,
			laydate = layui.laydate,
			element = layui.element,
			table = layui.table;
		laydate.render({
			elem: '#datebegin',
			type: 'datetime'
		});
		laydate.render({
			elem: '#dateend',
			type: 'datetime'
		});
		//表格初始化
		table.init('tableData', tableOptions);
		//搜索变量
		var datebegin = '',dateend = '';
		//搜索
		form.on('submit(serach)', function(obj) {
			if(obj.field.dateend != '') {
				if(obj.field.dateend < obj.field.datebegin) {
					mui.alert('结束日期不能大于开始日期', '提示');
					return false;
				}
			}
			datebegin = obj.field.datebegin;
			dateend = obj.field.dateend;
			table.reload('tabelReload', { //此处是tableOptions里定义的table标识id
				where: {
					'bdate': datebegin,
					'edate': dateend
				},
				page: {
					curr: 1 //重新从第1页开始
				}
			});
			return false;
		});
	});
</script>