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;
}
.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>选择时间: </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>
<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"> --请选择--
</option>
<option value="2"> 每页 2 条</option>
<option value="4"> 每页 4 条</option>
<option value="6"> 每页 6 条</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;
}
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;
}
}
});
</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']]);
}
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,
'num' => $num
];
}