bootstraptable列表与查询

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

​

 一、所要实现功能

打开显示列表，点击查询，跳出查询数据

​编辑

点击查询

​编辑

 二、前端代码

 <div class="find-top1">
             <div class="pull-right" id="query-form" style="padding-bottom:10px;">
               
                <div style="float:left;margin-right:5px;">
                    <input id="name" name="description" placeholder='请输入信息' type="text"
                           style="float:left;width:150px;margin-right:5px;" v-model="description" class="form-control">
                </div>
                <div class="btn-group">
                    <button id="btn_search"  type="button" class="btn btn-primary btn-space">
                    <span class="fa fa-search" aria-hidden="true" class="btn-icon-space"></span>
                        查询
                    </button>
                </div>
            </div>

    </div>
    
    <div class="table-con">
        <table id="table2" class="table-style"></table>
    </div>

JS代码

$(document).ready(function () {
        var abc=$('#name').val()
        console.log(abc)
            $('#table2').bootstrapTable({
                url: "xinxi_json01",                    // URL
                method: "post",                                        // 请求类型
                contentType: "application/x-www-form-urlencoded",      // post请求必须要有，否则后台接受不到参数
                sidePagination: "client",                              // 设置在服务端还是客户端分页
                showRefresh: false,                                    // 是否刷新按钮
                sortStable: true,                                      // 是否支持排序
                cache: false,                                          // 是否使用缓存
                pagination: true,                                      // 是否显示分页
                search: false,                                         // 是否有搜索框
                clickToSelect: true,                                   // 是否点击选中行
                pageNumber: 1,                                         // 首页页码，默认为1
                pageSize: 5,                                           // 页面数据条数
                pageList: [5, 10, 20, 30],
                queryParamsType: "",
                
                queryParams: function (params) {
                    return {
                        pageSize: params.pageSize,                     // 每页记录条数
                        pageNumber: params.pageNumber,                 // 当前页索引
                        name: $('#name').val()                        // 姓名
                        
                    };
                },
                columns: [
                {
                    title: "编号",
                    field: 'num',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '姓名',
                    field: 'name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '性别',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '部门',
                    field: 'department',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '岗位',
                    field: 'post',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '入职时间',
                    field: 'join_date',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '联系电话',
                    field: 'phone',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '合同签订',
                    field: 'agreement',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '员工状态',
                    field: 'em_state',
                    align: 'center'
                },
                {
                    title: '操作',
                    field: 'opr',
                    width: 180,
                    align: 'center',
                    formatter: function (cellval, row) {
                        var  e = '<button  id="detail" data-id="98" class="btn btn-xs btn-primary" onclick="detail('' + row.id + '')">详情</button> ';
                        var  d = '<button  id="edit" data-id="98" class="btn btn-xs btn-primary" onclick="edit('' + row.id + '')">编辑</button> ';
                        var  c = '<button  id="del" data-id="98" class="btn btn-xs btn-primary" onclick="del('' + row.id + '')">删除</button> ';

                        return  e+d+c;
                    }
                }]
            })

            // 查询按钮
            $('#btn_search').click(function () {
                $('#table2').bootstrapTable('refresh', { pageNumber: 1 });
            });

          
        });

后端代码

 public function xinxi_json01(){
        $val=input('request.');
        if(strlen($val['name'])>0){
            $list=Db::name('employ_file')->where('status',1)->where('name',$val['name'])->select();
        }else{
            $list=Db::name('employ_file')->where('status',1)->select();
        }
        
        return $list;

    }

\

​