ysy01/templates/user-book.html

{% extends "base-user.html" %}
{% block title %}查询图书信息{% endblock %}


{% block body %}
<div style="width: 1200px;margin: auto">
    <br />
    <form class="layui-form" method="post" id="searchForm">
    {{ form.csrf_token }}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                        {{ form.method(class="layui-input-inline") }}
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">查询内容：</label>
                        <div class="layui-input-inline">
                            {{ form.content(class="layui-input",style="width:250px") }}
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="layui-input-inline">{{ form.submit(class="layui-btn", id="search") }}</div>

                    </div>
                </div>
            </div>

        </div>
    </form>
    <div id="remove">
    <table lay-even id="result" lay-filter="re">
      <thead>
        <tr>
          <th lay-data="{field:'isbn', width:140}">ISBN</th>
          <th lay-data="{field:'book_name', width:200}">书名</th>
          <th lay-data="{field:'press', width:180}">出版社</th>
          <th lay-data="{field:'author', width:140}">作者</th>
          <th lay-data="{field:'class_name', width:200}">类别</th>
          <th lay-data="{field:'count', width:120}">馆藏数量</th>
          <th lay-data="{field:'available'}">可借数量</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    </div>
    <table id="test" lay-filter="test"></table>
</div>
{% endblock %}

{% block script %}
    <script>
    layui.use(['form','table','jquery'], function(){
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        table.init('re', {
              height: 390
              ,limit: 7
              ,page: true
        });

        $(document).ready(function(){
            $('#search').on('click',function () {
                var form = new FormData(document.getElementById("searchForm"));
                if($('#content').val() === ""){
                    layui.use('layer', function(){
                        var layer = layui.layer;

                        layer.msg('请填写查询内容',{time: 800});
                    });
                }
                else{
                    $.ajax({
                        url:"{{ url_for('find_book') }}",
                        type:"post",
                        data:form,
                        processData:false,
                        contentType:false,
                        success:function(data){
                            if (data.length !== 0){
                                $('#remove').remove();
                                table.render({
                                    elem: '#test'
                                    ,data:data
                                    ,cols: [[
                                      {field:'isbn', title:'ISBN', width:140}
                                      ,{field:'book_name', title:'书名', width:200}
                                      ,{field:'press', title:'出版社', width:180}
                                      ,{field:'author', title:'作者', width:140}
                                      ,{field:'class_name', title:'类别', width:200}
                                      ,{field:'count', title:'馆藏数量', width:120}
                                      ,{field:'available', title:'可借数量'}
                                    ]]
                                    ,page: true
                                    ,height: 390
                                    ,limit: 7
                                    ,response: {
                                      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                                    }
                                    ,parseData: function(data){ //将原始数据解析成 table 组件所规定的数据
                                      return {
                                        "code": data.status, //解析接口状态
                                        "msg": data.message, //解析提示文本
                                        "count": data.total, //解析数据长度
                                        "data": data.rows.item //解析数据列表
                                      };
                                    }
                                });
                            }
                            else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;

                                    layer.msg('未找到任何结果',{time: 1000});
                                });
                            }
                        }
                    });
                }
                return false;
            })
        });

    });
    </script>
{% endblock %}