vue + tp5 分页搜索一套通用

37 篇文章 1 订阅

在这里插入图片描述

  public function data(Request $request)
    {
        $param = $request->param();
        $param["params"]['num'] ?: $param["params"]['num'] = 5;
        $param["params"]['title'] ? $where['title'] = ['like', '%' . trim($param["params"]['title']) . '%'] : '';
        $param["params"]['ctime'] ? $where['ctime'] = [['>', strtotime(strstr($param["params"]['ctime'][0], 'T', true))], ['<', strtotime(strstr($param["params"]['ctime'][1], 'T', true))]] : '';
        $count = sn::where($where)->count();//总条数
        $num = $param['params']['num'];//每页显示条数
        $btnNum = ceil($count / $num);//总页数
        $param["params"]['page'] ["isTrusted"] >= $btnNum ? $param["params"]['page'] ["isTrusted"] = $btnNum : '';
        $param["params"]['page'] ["isTrusted"] <= 0 ? $param["params"]['page'] ["isTrusted"] = 1 : '';
        $page = $param["params"]['page'] ["isTrusted"] * $num - $num;//当前页数
        $res = sn::where($where)->limit($page,$num)->select();
        return json([$res, $btnNum, $param["params"]['page'] ["isTrusted"], $count]);
    }
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>公告管理</title>
    <link rel="stylesheet" href="__STATIC__/sagent/layui/css/layui.css"/>
    <link rel="stylesheet" href="__STATIC__/sagent/css/element.index.css">
    <style>
        .item {
            margin-right: 40px;
        }

        /*.inline{*/
        /*margin-right: 400px;*/
        /*}*/
        .layui-form-label {
            width: 100px;
        }

        .layui-table-tool {
            min-width: 1200px;
        }

        .layui-table-tool-temp {
            padding: 0;
        }

        .layui-upload-drag {
            padding: 10px 30px;
        }

        .fourPhoto {
            display: flex;
            margin: 0 5px;
            border-radius: 10px;
            justify-content: center;
            width: 1000px;
        }

        .layui-card-header {
            height: 20px;
        }

        .el-col {
            width: 25%;

        }

        .el-card {
            height: 120px;
        }

        .fourPhoto > img {
            margin-right: 20px;
        }

        .line {
            height: 50px;
        }

        .income {
            display: flex;
            text-align: left;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 100px;
        }

        .income > p {
            margin: 20px 0;
        }

        .fon {
            font-size: 20px;
        }

        .font {
            font-size: 25px;
            white-space: nowrap;
        }

        .layui-input-block {
            margin-left: 0;
        }
    </style>
</head>

<body>
<div id="page" class="layui-fluid">
    <div style="height: 100%;">
        <div class="layui-card" style="padding: 30px;">

            <div class="line">
                <div class="layui-inline newClass">
                    <span>选择时间:&nbsp;</span>
                    <el-date-picker v-model="time" type="daterange"
                                    range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>


                </div>
            </div>
            <div class="line" style="margin: 0px 65px;">
                <div class="layui-inline">
                    <div>
                        <div class="el-input el-input--small">
                            <input v-model="title" type="text" autocomplete="off" value="{$search.title}"
                                   placeholder="请输入标题"
                                   class="el-input__inner">


                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button type="button" @click="index"
                                class="el-button el-button--primary el-button--small">
                            <span>查询</span></button>
                        <button type="button" data-url="add"
                                class="el-button el-button--primary el-button--small">
                            <span>添加</span></button>
                        <button type="button" @click="emptyy"
                                class="el-button el-button--green el-button--small">
                            <span>清空</span></button>
                    </div>
                </div>
            </div>
            <div class="el-table el-table--fit el-table--enable-row-hover" element-loading-text="拼命执行中"
                 element-loading-spinner="el-icon-loading" style="width: 100%;">
                <div class="hidden-columns">


                </div>
                <div class="el-table__header-wrapper">
                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header">
                        <colgroup>
                            <col name="el-table_3_column_12" width="189">
                            <col name="el-table_3_column_13" width="189">
                            <col name="el-table_3_column_14" width="189">
                            <col name="el-table_3_column_15" width="189">
                            <col name="el-table_3_column_16" width="250">
                            <col name="gutter" width="0">
                        </colgroup>
                        <thead class="has-gutter">
                        <tr class="">
                            <th colspan="1" rowspan="1" class="el-table_3_column_12     is-leaf">
                                <div class="cell">标题</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_3_column_13     is-leaf">
                                <div class="cell">创建时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_3_column_14     is-leaf">
                                <div class="cell">状态</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_3_column_15     is-leaf">
                                <div class="cell">投放对象</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_3_column_16  is-right   is-leaf">
                                <div class="cell">操作</div>
                            </th>
                            <th class="gutter" style="width: 0px; display: none;"></th>
                        </tr>

                        <tr v-for="v in datas">
                            <td>{{v.title}}</td>
                            <td>{{v.ctime }}</td>
                            <td>通过</td>
                            <td></td>
                            <td style="text-align: right">
                                <button type="button" class="layui-btn layui-btn-normal">编辑</button>
                                &nbsp;&nbsp;&nbsp;<button type="button" class="layui-btn layui-btn-danger">删除</button>
                            </td>
                        </tr>

                        </thead>
                    </table>
                </div>
                <div class="el-table__body-wrapper is-scrolling-none">
                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
                        <colgroup>
                            <col name="el-table_3_column_12" width="189">
                            <col name="el-table_3_column_13" width="189">
                            <col name="el-table_3_column_14" width="189">
                            <col name="el-table_3_column_15" width="189">
                            <col name="el-table_3_column_16" width="250">
                        </colgroup>
                        <tbody>

                        </tbody>
                    </table>
                    <!--                                        <div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>-->

                </div>


                <div class="el-table__column-resize-proxy" style="display: none;"></div>
                <div class="el-loading-mask" style="display: none;">
                    <div class="el-loading-spinner"><i class="el-icon-loading"></i>
                        <p class="el-loading-text">拼命执行中</p>
                    </div>
                </div>
            </div>
            <div class="el-pagination is-background" style="margin-top: 10px;"><span class="el-pagination__total">{{count}}</span><span class="el-pagination__sizes">
                        <div class="el-select el-select--mini">

                            <div class="el-input el-input--mini el-input--suffix">

                        <select   @change="index" v-model="num"  placeholder="请选择" class="el-input__inner" name="" id="">
                            <option value="5">&nbsp;&nbsp;&nbsp;--请选择--
                            </option>
                            <option  value="2">&nbsp;&nbsp;&nbsp;每页&nbsp;2&nbsp;</option>
                            <option   value="4">&nbsp;&nbsp;&nbsp;每页&nbsp;4&nbsp;</option>
                            <option  value="6">&nbsp;&nbsp;&nbsp;每页&nbsp;6&nbsp;</option>
                        </select>



                                <span class="el-input__suffix"><span class="el-input__suffix-inner"><i
                                        class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                                    </span>
                                </span>

                            </div>
                        </div>
                    </span>
                <button @click="index(page-1)" type="button" class="btn-prev"><i
                        class="el-icon el-icon-arrow-left"></i></button>
                <ul class="el-pager">
                    <li v-for="k of btnnum" @click="index(k)" :class="[page==k?'active':'']">
                        {{k}}
                    </li>
                </ul>
                <button @click="index(page+1)" type="button" class="btn-next"><i
                        class="el-icon el-icon-arrow-right"></i></button>
                <span class="el-pagination__jump">前往<div
                        class="el-input el-pagination__editor is-in-pagination"><!----><input
                        @keyup.enter="index(searchpage)" v-model="searchpage"
                        v-on:blur="index(searchpage)"
                        type="number" autocomplete="off" min="1" max="1" class="el-input__inner">
                    <!----><!----><!----><!----></div></span>
            </div>
        </div>
    </div>
</div>
</body>
<script src="__STATIC__/sagent/js/public/vue.js"></script>
<script src="__STATIC__/sagent/js/public/element.index.js"></script>
<script src="__STATIC__/sagent/js/public/jquery.min.js"></script>
<script src="__STATIC__/sagent/js/public/pub.js"></script>
<script src="__STATIC__/sagent/js/axios.min.js"></script>

<script type="text/javascript">
    new Vue({
        el: "#page",
        data: {
            select:'',
            num: 5,
            count: '',
            searchpage: '',
            page: 1,
            btnnum: '',
            time: "",
            title: "",
            datas: [],
        },
        mounted: function () {
            this.index();
        },
        created() {
            //回车事件
            var lett = this;
            document.onkeydown = function (e) {
                var key = window.event.keyCode;
                if (key == 13) {
                    this.index();
                }
            }
        },

        methods: {
            index(page) {
                console.log(this.num);
                that = this;
                axios.post('data', {
                    params: {
                        ctime: this.time,
                        title: this.title,
                        page: page,
                        num: this.num
                    }
                }).then(function (res) {
                    if (!res.status == 200) {
                        return;
                    }
                    // console.log(res);

                    that.datas = res.data[0];
                    that.btnnum = res.data[1];
                    that.page = parseInt(res.data[2]);
                    that.count = res.data[3];
                }).catch(function (error) {
                    console.log(typeof +error)
                })
            },


            emptyy() {
                this.time = '',
                    this.title = '',
                    this.index();
            },
            demo() {
                this.title;
                // axios.get('index', {
                //     params: {
                //         ctime: this.time,
                //         title: this.title
                //     }
                // }).then(function (res) {
                //     if (!res.status == 200) {
                //         return;
                //     }
                // }).catch(function (error) {
                //     console.log(typeof +error)
                // })

            }
        }
    });
</script>

</html>
public function data(Request $request)
    {
        $param = $request->param();
        $param["params"]['title'] ? $where['title'] = ['like', '%' . trim($param["params"]['title']) . '%'] : '';
        $param["params"]['ctime'] ? $where['ctime'] = [['>', strtotime(strstr($param["params"]['ctime'][0], 'T', true))], ['<', strtotime(strstr($param["params"]['ctime'][1], 'T', true))]] : '';
        $data = self::limit(sn::where($where)->count(), $param['params']['num'], $param["params"]['page'] ["isTrusted"]);
        $res = sn::where($where)->limit($data['page'], $data['num'])->select();
        return json([$res, $data['btnNum'], $data['param_page'], $data['count']]);
    }

    /**
     * @param $count        总条数
     * @param $num          每页显示条数
     * @param $param_page   当前页数
     * @return array
     */
    public function limit($count, $num, $param_page)
    {
        $btnNum = ceil($count / $num);
        $param_page >= $btnNum ? $param_page = $btnNum : '';
        $param_page <= 0 ? $param_page = 1 : '';
        $page = $param_page * $num - $num;
        return [
            'count' => $count,              // 总条数
            'btnNum' => $btnNum,            // 统计显示按钮个数
            'param_page' => $param_page,    // 当前页数
            'page' => $page,                // SQL语句 limit的参1
            'num' => $num                   // 每页显示条数   SQL语句 limit的参2
        ];
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值