不多说了直接上代码：
1、在头部<head> </head>中记得引入 js
2、logo 图标如果需要就放一张 .ico 的图片，如果不需要就注释掉
页面html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="icon" type="image/x-icon" href="__PUBLIC__/image/logo.ico">
<link rel="stylesheet" href="__PUBLIC__/css/show.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<title>数据显示</title>
</head>
<body>
<div class="sh_dv">
<div class="sh_dv_tay">
<div class="dv_select">
<input class="input_sb input_sel" type="text" placeholder="用户名或邮箱或时间" autofocus="">
<button class="input_sb input_btn" onclick="selBtn();">查询</button>
</div>
<div class="sh_dv_contact">
<ul class="sh_ul">
<li class="sh_li sh_li_name">姓名</li>
<li class="sh_li sh_li_email">eamil</li>
<li class="sh_li sh_li_contact">问题</li>
<li class="sh_li sh_li_time sh_li_tibtn the">
<span>时间</span>
<span class="time_border time_left"></span>
<span class="time_border time_right"></span>
</li>
<li class="sh_li sh_li_del"> 操作<input id="checkboxAll" type="checkbox" /><span class="delAll">删除</span></li>
</ul>
{volist name='lis' id='v' length="30"}
<ul class="sh_ul">
<li class="sh_li sh_li_id" style="display: none;">{$v.id}</li>
<li class="sh_li sh_li_name">{$v.name}</li>
<li class="sh_li sh_li_email">{$v.email}</li>
<li class="sh_li sh_li_contact">{$v.comment}</li>
<li class="sh_li sh_li_time">{$v.date|substr=###,0,10}</li>
<li class="sh_li sh_li_del cbAll"><input value={$v.id} type="checkbox" /><span class="del">删除</span></li>
</ul>
{/volist}
</div>
</div>
</div>
<script>
//点击时间按钮 正序 倒序
var num = true;
$(".sh_li_tibtn").click(function(){
if(num){
$(this).addClass("is").val(1);
$(this).removeClass("the");
$.ajax({
url: "/index/index/zx",
async:true ,
type: "POST",
dataType: "json",
data: {"sv": $(".is").val()},
success: function (data) {
console.log("正"+data);
return true;
},
error: function () {
return false
}
})
num = false;
}else if(num == false){
$(this).addClass("the").val(2);
$(this).removeClass("is");
$.ajax({
url: "/index/index/dx",
async:true ,
type: "POST",
dataType: "json",
data: {"sv": $(".the").val()},
success: function (data) {
console.log("反"+data);
return true;
},
error: function () {
return false
}
})
num = true;
}
})
//删除单个
$('.sh_ul .del').click(function(){
var s = $(this).parent().siblings('.sh_li_id').html();
if(confirm('确定删除?')){
console.log("我打你啊！" + s);
$.ajax({
url: "/index/index/del",
async:true ,
type: "POST",
dataType: "json",
data: {"id": s},
success: function (data) {
window.location ='/index/index/show';//返回本页
return true;
},
error: function () {
return false;
}
})
}
})
//批量选择
$("#checkboxAll").click(function () {
if(this.checked){
$(".cbAll :checkbox").prop("checked", true);
}else{
$(".cbAll :checkbox").prop("checked", false);
}
})
//批量删除
$(".delAll").click(function () {
if(confirm('确定将选择的删除?')){
var ids=new Array();
$('.cbAll :checked').each(function(){
var s = $(this).val();
console.log("获取数："+s);
//ids.push($(this).val());//向数组中添加元素
});
}
})
//查询按钮 条件查询、 空查询返回全部数据
function selBtn(){
var int_val = $(".input_sel").val();
location.href = "/index/index/show/inp/sel/val/"+int_val;
}
//回车查询
$(".input_sel").keydown(function(e) {
var evt = window.event || e;
var int_val = $(".input_sel").val();
if (evt.which == 13) {
window.location.href = "/index/index/show/inp/sel/val/"+int_val;
}
});
</script>
</body>
</html>样式css:
/* show页面样式 */
.sh_dv{width: 100%;height: 100%;min-width: 320px;text-align: center;background: #f9f9f9;}
.sh_dv_tay{width: 1300px;height: 100%;margin: auto;border: 10px solid #00CC99;}
.dv_select{}
.input_sb{margin:8px;border-radius: 8px;}
.input_sel{width:300px;height:18px;padding:5px 10px;outline: none;border: 1px solid #ababab;}
.input_btn{width:50px;height:28px;color:#fff;background: #007aff;outline: none;border:none;}
.input_btn:hover{opacity: 0.8;cursor: pointer;}
.sh_dv_contact{width: 100%;height: 100%;}
.sh_ul{display: flex;}
.sh_li{line-height: 1.5;font-size: 16px;margin: 2px;border: 1px solid #8D8D8D;}
.sh_li_name{width: 150px;}
.sh_li_email{width: 250px;}
.sh_li_contact{width: 650px;}
.sh_li_time{width: 150px;position: relative;}
.sh_li_del{width:100px;}
.del{color:red;cursor: pointer;}
.del:hover{opacity: 0.8;}
.delAll{color:red;cursor: pointer;}
.delAll:hover{opacity: 0.8;}
.sh_li_tibtn{cursor: pointer;}
.time_border{width:10px;height:1px;background: #888;position: absolute;}
/*反*/
.the .time_left{transform: rotate(45deg);top:13px;right:30px;}
.the .time_right{transform: rotate(-45deg);top:13px;right:23px;}
/*正*/
.is .time_left{transform: rotate(-45deg);top:10px;right:30px;}
.is .time_right{transform: rotate(45deg);top:10px;right:23px;}一些方法：
//条件查询 空值查询
public function show( $inp = null,$val=null){
if($inp =='sel'){
$lis = Db::query("SELECT * FROM msg_information WHERE name = '$val' OR email ='$val' OR date LIKE '$val%'");//查询数据
$this->assign('lis', $lis);
}
if($inp == null || $val == null){
$lis = Db::query('select * from msg_information ORDER BY date DESC');//查询数据
$this->assign('lis', $lis);
}
return $this->fetch();
}
//删除单个
public function del($id){
$msg = json_encode(['msg'=>'success']);
$msg2 = json_encode(['msg'=>'false']);
$list = Db::query('select id from msg_information ');//查询数据
$locar = array();
foreach($list as $k =>$v){
array_push($locar,$v['id']);//本地id集合
}
if(!empty($id) && in_array($id,$locar)){//判断传入id不为空 传入id 要在本地id集合中存在
Db::table('msg_information')->delete($id);//查询数据
return $msg;
}else{
return $msg2;
}
return $msg2;
}
//批量删除
作为参考，感谢前人的文章：https://blog.csdn.net/wy123123000/article/details/73571763