1. Html page

<section class="layui-fluid">
    <aside class="layui-card" id="queryDiv">
        <div class="layui-elem-quote">
            <form class="layui-form">
                    <div class="layui-inline">
                        <label>number:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="phone" type="text">
                        </div>
                    <a class="layui-btn search_btn" data-type="reload">search</a>
                    </div>
            </form>
        </div>
    </aside>

    <article class="my-table">
        <table id="tableList" lay-filter="tableList"></table>
    </article>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container" id="tableNav">
            <button type="button" class="layui-btn layui-btn-sm" id="add">New users</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="del">delete user</button>
        </div>
    </script>
</section >

2. Corresponding js

layui.use(['form','layer','table'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        table = layui.table;

    // Loading prompt
    var loadingMsg = layer.msg('Data request in progress', {icon: 16,scrollbar: false,time: 0});
    // Initialize tables and data
    var tableIns = table.render({
        elem: '#tableList',
        url : 'sysUser/list',
        where :{
            phone : $("#phone").val()
        },
        cellMinWidth : 95,
        toolbar: "#toolbarDemo ", / / let the left side of the toolbar display the default built-in template
        defaultToolbar: ['filter'], // Icon buttons on the right side of the toolbar ['filter ',' print ',' exports']
        even: true, // Turn on zebra crossing effect
        page : true,
//        Height: "full-125", / / placed at the bottom of the page
        limits : myLimits,
        limit : myLimit,
        id : "tableListTable",
        cols : [[
            {field: 'userId', title: 'ID', width:100, align:"center"},
            {field: 'userName', title: 'User name', minWidth:150, align:"center"},
            {field: 'state', title: 'state', width:80, align:"center", templet: stateFormat},
            {field: 'sex', title: 'Gender', width:80, align:"center", templet: sexFormat},
            {field: 'remark', title: 'Remarks', align:"center"}
        ]],
        done: function(res, curr, count){
            // Turn off prompt layer
            layer.close(loadingMsg);
            // Trigger event for binding table toolbar button
            bindTableToolbarFunction();
        }
    });

    // ====================Defining general functions====================
    // Refresh table data
    function reloadTable(){
        // Loading prompt
        loadingMsg = layer.msg('Data request in progress', {icon: 16,scrollbar: false,time: 0});
        // Reload data
        table.reload("tableListTable",{
            page: {
                curr: 1 //Start again on page 1
            },
            where: {
                phone : $("#phone").val()
            },
            done: function(res, curr, count){
                layer.close(loadingMsg);
                bindTableToolbarFunction()
            }
        });
    }

    // Search [this function needs background cooperation, so there is no dynamic effect demonstration for now]
    $(".search_btn").on("click",function(){
        // Refresh table
        reloadTable();
    });

    // Format display user status information
    function stateFormat(d){
        var str;
        if (d.state == 0) {
            str = '<span class="fontColor_red">Prohibit</span>';
        } else if(d.state == 1) {
            str = '<span class="fontColor_green">normal</span>';
        } else {
            str = '<span class="fontColor_darkOrange">locking</span>';
        }
        return str;
    }

    // Format display sex information
    function sexFormat(d){
        var str;
        if (d.sex == 0) {
            str = 'female';
        } else if(d.sex == 1) {
            str = 'male';
        } else {
            str = '<span class="fontColor_red">Unknown</span>';
        }
        return str;
    }

    // ====================Define event handling====================
    // Binding event set processing (called when the table is loaded and refreshed)
    function bindTableToolbarFunction() {
        // Bind new user event
        $("#add").on("click", function() {
            layer.alert("New user called", {icon: 6});
        });

        // Bind delete user event
        $("#del").on("click", function() {
            layer.alert("Delete user called", {icon: 6});
        });
    }
})