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>