table模块是layui比较核心的组件之一，他能将表格数据进行动态的展示，追加、修改等操作，当所有接口写好以后，后面使用起来那叫一个爽，目前作者还在完善这个框架之中，我们来看看我们常用的数据展示的例子

还是在学习使用Flask框架，先看看函数代码，上面的导入模块这里就不写出来了，展示主要代码：

@tools.route('/news', methods=['POST','GET'])
def news():
    return render_template('article/news.html')

@tools.route('/ajaxnew', methods=['POST','GET'])
def ajaxNews():
    page = request.args.get('page')
    limit = request.args.get('limit')
    show_status = 0
    if not page and not limit:
        page = 1
        limit = 30
    else:
        page = int(page)
        limit = int(limit)
    limit_start = (page-1)*limit

    client = MongoClient(host=getServerIp(), port=getMongoPort())
    db = client[getMongoDbName()]
    coll = db['news']
    result = coll.find({ "catid":{"$gte": 0} }).sort([("catid",-1),("timestamp",-1)]).limit(limit).skip(limit_start)
    total = coll.find({ "catid":{"$gte": 0} }).count()
    data = []
    for val in result:
        quality = round(val['score'],2)
        timearray = time.localtime(val['timestamp'])
        timestamp = time.strftime("%Y-%m-%d %H:%M:%S", timearray)
        data.append({'id':str(val['_id']),'camera_id':val['catid'],'score':score,'buri':val['buri'],'luri':val['luri'],'thumb':val['thumb'],'timestamp':timestamp})
    tables = {
        "code": 0,
        "msg": "",
        "count": total,
        "data": data
    }
    return jsonify(tables)

我们来看看前端代码吧：

{% include 'public/header.html' %}
<div class="layui-warp">
    <table id="news" lay-filter="news"></table>
</div>
<script>
layui.use(['form','laydate', 'table', 'layer','jquery'], function(){
    var layer = layui.layer
    ,laydate = layui.laydate
    ,table = layui.table
    ,form = layui.form
    ,$ = layui.jquery;
  	table.render({
		elem: '#news'
		,url: '{{ url_for("tools.ajaxNews") }}' //数据接口
		,page: true //开启分页
		,cols: [[ //表头
			{field: 'id', title: 'Id', width:220, 'fixed':'left'}
			,{field: 'catid', title: '分类', width:90}
			,{field: 'score', title: '分数', width:90}
			,{field: 'buri', title: '大URI', width:180}
			,{field: 'luri', title: '小URI', width:180}
			,{field: 'thumb', title: '缩略图', width: 280}
			,{field: 'timestamp', title: '时间', width: 160}
		]]
	});
});
</script>
{% include 'public/footer.html' %}

这个是一个展示的最简单的实例，只需要将返回的数据按照layui要求的格式构建起来返回就行了，然后他的数据表格方法其实就是get方法，参数如下：

?page=1&limit=30

在官方截了个图做来演示