代码:
<style>
.table_title_1,
.table_row_1 {
width: 10%;
}
.table_title_2,
.table_row_2 {
width: 10%;
}
.table_title_3,
.table_row_3 {
width: 10%;
}
.table_title_4,
.table_row_4 {
width: 10%;
}
.table_title_5,
.table_row_5 {
width: 10%;
}
.table_title_6,
.table_row_6 {
width: 10%;
}
.table_title_7,
.table_row_7 {
width: 10%;
}
.table_title_8,
.table_row_8 {
width: 10%;
}
.table_title_9,
.table_row_9 {
width: 10%;
}
.table_title_10,
.table_row_10 {
width: 10%;
text-align: right;
}
.pagination_box{
padding: 30px 0 10px 0;
}
/*分页样式修改,可封装到公共样式文件*/
.pagination {
display: flex;
flex-direction: row;
align-items: center;
}
.pagination li {
list-style: none;
}
.pagination li a {
background-color: rgb(213, 239, 255);
font-size: 12px;
margin-right: 10px;
cursor: pointer;
display: inline;
padding: 4px 9px;
border-radius: 2px;
color: #333;
}
.pagination .active span {
background-color: rgb(92, 163, 255);
display: inline;
margin-right: 10px;
font-size: 12px;
padding: 4px 9px;
border-radius: 2px;
color: #fff;
}
.pagination .disabled span {
background-color: rgb(234, 234, 234);
display: inline;
margin-right: 10px;
font-size: 12px;
padding: 4px 9px;
border-radius: 2px;
}
</style>
<div class="content">
<div class="content_title">用户管理-测试</div>
<div class="content_table">
<div class="table_title">
<div class="table_title_1">id</div>
<div class="table_title_2">用户名</div>
<div class="table_title_3">昵称</div>
<div class="table_title_4">tel</div>
<div class="table_title_5">性别</div>
<div class="table_title_6">地区</div>
<div class="table_title_7">ip</div>
<div class="table_title_8">成就值</div>
<div class="table_title_9">创建日期</div>
<div class="table_title_10">操作</div>
</div>
{volist name="list" id="vo"}
<div class="table_row">
<div class="table_row_1">{$vo.id}</div>
<div class="table_row_2">{$vo.username}</div>
<div class="table_row_3">{$vo.nicheng}</div>
<div class="table_row_4">{$vo.tel}</div>
<div class="table_row_5">{$vo.sex}</div>
<div class="table_row_6">{$vo.province}</div>
<div class="table_row_7">{$vo.ip}</div>
<div class="table_row_8">{$vo.chengjiu}</div>
<div class="table_row_9">{$vo.create_date}</div>
<div class="table_row_10"></div>
</div>
{/volist}
</div>
</div>
<div class="pagination_box">
{$list|raw}
</div>
<script>
$(function () {
pageClick('/admin/user_admin2/', '#right_content');
})
/*分页跳转函数,可封装到公共页面*/
function pageClick(now_url, dom_id) {
$(".pagination li a").removeAttr("href");//禁用原href属性
let now_page = $(".pagination .active span").text();
let next_page;
let pre_page;
$(".pagination li a").click(function () {
let a = $(this).text();
if(a == "»"){
next_page = Number(now_page) + 1;
$(dom_id).load(now_url + 'page/' + next_page);
}else if(a == "«"){
pre_page = Number(now_page) - 1;
$(dom_id).load(now_url + 'page/' + pre_page);
}else{
$(dom_id).load(now_url + 'page/' + a);
}
})
}
</script>