使用Layui实现简单的列表查询

效果图如下：

前台代码：

页面定义表格
<table id="BWxuserTable" ></table>

<script>
    /**
     * 员工管理管理初始化参数
     */
    var BWxuser = {
        id: "BWxuserTable",	//表格id
        seItem: null,		//选中的条目
        table: null,
        layerIndex: -1,
        pageSize: 20,  //每页条数
        pageNumber: 1  //页码
    };
    /**
     * 加载模块，bootstrap_table_edit的模块需要自定义
     */
    layui.use(['layer','form','bootstrap_table_edit'], function () {
        var layer = layui.layer
            , table = layui.table
            , $ = layui.jquery
            , form = layui.form;

        /**
         * 初始化表格的列，定义列名和字段名
         */
        BWxuser.initColumn = function () {
            return [
                {checkbox: true, halign: 'center', align: "center", width: 50},
                {
                    title: '序号', align: "center", halign: 'center', width: 50, formatter: function (value, row, index) {
                        return (BWxuser.pageNumber - 1) * BWxuser.pageSize + 1 + index;
                    }
                },
                {title: '员工ID', field: 'struId', align: 'center', halign: 'center'},
                {title: '员工姓名', field: 'name', align: 'center', halign: 'center'},
                {title: '员工工号', field: 'workId', align: 'center', halign: 'center'}
            ];
        };

        /**
         * 获取后台列表数据
         */
        $(function () {
            var defaultColunms = BWxuser.initColumn();
            $('#BWxuserTable').bootstrapTable({
                dataType: "json",
                url: '/userListManagen/list',
                pagination: true,
                pageList: [10, 15, 20, 50, 100],
                striped: true,
                pageSize: 20,
                queryParams: queryParams,
                queryParamsType: '',
                columns: defaultColunms,
                height: $("body").height() - $(".layui-form").outerHeight(true) - 26,
                sidePagination: "server",
                onPageChange: function (number, size) {
                    BWxuser.pageNumber = number;
                    BWxuser.pageSize = size
                }
            });
        })

        /**
         * 查询条件以及分页参数
         */
        function queryParams(){
            var nameOrPhone=$("#condition").val();//查询条件
            var temp={
                pageSize:this.pageSize,
                pageNumber:this.pageNumber
            };
            return temp;
        }
            });
</script>