css样式：
<style type="text/css">
#table_select {
width: 96%;
/* height: ; */
/* background-color: yellow; */
padding: 0px 2% 0px 2%;
}
#select_inner {
width: 100%;
height: 45px;
/* background-color: red; */
border-bottom: 1px solid #E4E7ED;
display: flex;
color: #909399;
font-size: 14px;
}
#select_border input {
background-color: transparent;
/* border-color: rgb(210, 213, 216); */
border: 1px solid red;
width: 15px;
height: 15px;
outline: none;
}
#select_border {
width: 3%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#select_id {
width: 4.1%;
height: 100%;
/* background-color: yellow; */
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#select_id_inner {
width: 4%;
height: 100%;
/* background-color: yellow; */
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#select_name_inner {
width: 14.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#identity_card {
width: 11.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#customer {
width: 14.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#contract {
width: 8%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#employment_form {
width: 11.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#item_located {
width: 11.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#before_the_post {
width: 11.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#level_inner {
width: 8.1%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.select_table {
width: 100%;
height: 45px;
/* background-color: red; */
border-bottom: 1px solid #E4E7ED;
display: flex;
color: #5b5d61;
font-size: 14.3px;
transition: 0.2s;
}
.select_table:hover {
background-color: #F5F7FA;
transition: 0.2s;
}
#form {
width: 100%;
height: 570px;
/* background-color: #409EFF; */
overflow-y: scroll;
overflow-x: scroll;
border-bottom: 1px solid #E4E7ED;
}
#form::-webkit-scrollbar {
display: none
}
.form_table {
width: 100%;
height: 48px;
border-bottom: 1px solid #E4E7ED;
display: flex;
color: #5b5d61;
font-size: 14.3px;
transition: 0.2s;
}
.form_table:hover {
background-color: #F5F7FA;
transition: 0.2s;
}
.form_tabta {
width: 100%;
height: 48px;
border-bottom: 1px solid #E4E7ED;
display: flex;
color: #5b5d61;
font-size: 14.3px;
transition: 0.2s;
background-color: #E47470;
}
.form_tabta:hover {
background-color: #F5F7FA;
transition: 0.2s;
}
#form_chechbox {
width: 3%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_chechbox input {
background-color: transparent;
/* border-color: rgb(210, 213, 216); */
border: 1px solid red;
width: 15px;
height: 15px;
outline: none;
}
#form_id {
width: 5%;
height: 100%;
/* background-color: yellow; */
display: flex;
align-items: center;
justify-content: center;
}
#form_name {
width: 7%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_identity {
width: 12%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_Telephone {
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_contract {
width: 8%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
line-height: 23px;
}
#form_employment {
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_item {
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#fork_beforepost {
width: 8%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_stalls {
width: 8%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_status {
width: 9%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#form_operate {
width: 10%;
height: 100%;
/* display: flex; */
align-items: center;
justify-content: center;
/* margin-left:%; */
}
#form_operate button {
width: 78px;
height: 32px;
background-color: #409EFF;
/* background-color: red; */
border-radius: 5px;
color: white;
border: none;
outline: none;
/* display: flex; */
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 25%;
margin-top: 6%;
}
#form_operate img {
width: 13px;
height: 13px;
margin-left: 5px;
}
#select_font {
transition: 0.1s;
width: 78px;
height: 95px;
background-color: #FFFFFF;
/* position: absolute; */
position: relative;
/* margin-top: 140px; */
display: none;
/* position: relative; */
/* margin-top: 7px; */
border-radius: 10px;
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
z-index: 999;
margin-left: 25%;
padding-top: 10px;
}
#form_operate button:hover {
background-color: rgba(64, 158, 255, 0.8);
}
#form_operate:hover #select_font {
transition: 0.1s;
display: block;
}
.select {
width: 100%;
height: 30px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
color: red;
cursor: pointer;
}
.select:hover {
background-color: #F2F5FF;
}
.select_font:hover {
background-color: #F2F5FF;
color: rgb(126, 156, 255);
}
.select_font {
width: 100%;
height: 30px;
background-color: #FFFFFF;
color: #19191b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.detail {
width: 100%;
height: 30px;
cursor: pointer;
/* background-color: red; */
display: flex;
align-items: center;
justify-content: center;
color: #5b5d6;
}
.detail:hover {
background-color: #ECF5FF;
color: #7e9cff;
}
#page_footer {
width: 100%;
height: 32px;
display: flex;
/* background-color: red; */
align-items: center;
justify-content: center;
}
#page_footer p {
font-size: 14px;
color: #5b5d61;
margin-left: 10px;
}
#page_footer input {
width: 50px;
height: 100%;
margin-left: 10px;
color: #909399;
background-color: transparent;
outline: none;
border: none;
border-radius: 4px;
border: 1px solid #E4E7ED;
text-align: center;
}
.button_but {
width: 32px;
height: 32px;
border: none;
outline: none;
background-color: #F0F2F5;
color: #5b5d61;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
#but {
display: flex;
height: 32px;
}
#but div {
background-color: #F0F2F5;
color: #5b5d61;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin-left: 10px;
}
#but div:hover {
color: #409EFF;
}
#page_footer select {
width: 120px;
height: 20px;
/* border: none; */
color: #909399;
background-color: transparent;
outline: none;
border-radius: 4px;
border-color: #E4E7ED;
}
.button_but:hover {
color: #409EFF;
}
</style>html结构：
<div id="table_select">
<div id="select_inner">
<div id="select_id">
<input type="checkbox" name="" id="">
</div>
<div id="select_id_inner">
<b>id</b>
</div>
<div id="select_name_inner">
<b>项目名称</b>
</div>
<div id="identity_card">
<b>负责人</b>
</div>
<div id="customer">
<b>劳资员</b>
</div>
<div id="contract">
<b>项目人数</b>
</div>
<div id="employment_form">
<b>立项时间</b>
</div>
<div id="item_located">
<b>负责人电话</b>
</div>
<div id="before_the_post">
<b>项目部地址</b>
</div>
<div id="level_inner">
<b>操作</b>
</div>
</div>
<div id="form">
</div>
<div style="height: 130px;width: 100%;display: flex;align-items: center;">
<div id="page_footer">
<select id="number_select">
<option value="10">10条/页</option>
<option value="5">5条/页</option>
<option value="30">30条/页</option>
</select>
<p>共<span id="common"></span>条</p>
<div class="button_but" onclick="bou()">
《
</div>
<div id="but">
</div>
<div class="button_but" onclick="bottom()">》</div>
<p>前往</p> <input type="text" class="input-text" value=""
onkeyup="value=value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,'')" id="price" name="price"
id="title_number">
<p>页</p>
</div>
</div>
</div>js
<script type="text/javascript">
let page = {
pageSize: 10, //每页多少条数据
currentPage: 1, //第几页
total: 0, //总共有多少条数据
};
let title_number = document.getElementById('title_number');
let number_select = document.getElementById('number_select');
let pages_number;
let viewData = []; //页面要渲染的数据
number_select.onchange = function() {
// console.log(number_select.value);
page.pageSize = number_select.value;
title()
console.log(page.pageSize);
}
let price = document.getElementById('price');
// 总页数
let jump;
price.onchange = function() {
// input数字
let price_val = document.getElementById('price').value;
// title()
if (price_val > 1 && price_val <= jump) {
title()
page.currentPage = price_val;
}
if (price_val < 1) {
price_val = 1;
}
if (price_val > jump) {
alert('暂无此页')
}
}
function title() {
// 渲染数据
$.ajax({
url: "http://labour.kuxia.top/api/Staff/staff_info",
type: "POST",
data: {
sign: '3',
id: '1',
pid: '1',
admin_id: '1',
admin_name: '超级管理员'
},
success: function(data) {
console.log(data);
jump = Math.ceil(data.info.length / page.pageSize);
$("#common").html(data.info.length)
page.total = data.info.length; //页面要显示的数据总条数
// viewData = data.info.slice((page.currentPage - 1) * page.pageSize, page.pageSize + ((page
// .currentPage - 1) * page
// .pageSize)); //这里就是截取出来第一页的十条数据
viewData = data.info.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page
.pageSize);
console.log(viewData);
let data_inner = '';
for (let i = 0; i < viewData.length; i++) {
if (viewData[i].grade == null) {
data_inner += `<div class="form_tabta">
<div id="form_chechbox">
<input type="checkbox" name="" id="">
</div>
<div id="form_id">
<span>${viewData[i].id}</span>
</div>
<div id="form_name">
<span>${viewData[i].name}</span>
</div>
<div id="form_identity">
<span>${viewData[i].id_number}</span>
</div>
<div id="form_Telephone">
<span>${viewData[i].tel}</span>
</div>
<div id="form_contract">
<p>${viewData[i].entry_time}</p>
<p>${viewData[i].graduation_date}</p>
</div>
<div id="form_employment">
<span>${viewData[i].title}</span>
</div>`;
if (viewData[i].pname != null) {
data_inner += `<div id="form_item">
<span>${viewData[i].pname}</span>
</div>`
} else if (viewData[i].pname == null) {
data_inner += `<div id="form_item">
<span></span>
</div>`
}
data_inner += `<div id="fork_beforepost">
<span>${viewData[i].jobs}</span>
</div>`;
if (viewData[i].grade == null) {
data_inner += `<div id="form_stalls">
<span></span>
</div>`
} else if (viewData[i].grade != null) {
data_inner += `<div id="form_stalls">
<span>${viewData[i].grade}</span>
</div>`;
}
if (viewData[i].status == '在职') {
data_inner +=
`<div id="form_status"><span style="color: rgb(126, 156, 255);">${viewData[i].status}</span></div>`
} else if (viewData[i].status == '离职') {
data_inner +=
`<div id="form_status"><span style="color: rgb(220, 20, 60);">${viewData[i].status}</span></div>`
}
data_inner += `<div id="form_operate">
<button>更多<img src="img/errowimg.png" alt=""></button>
<div id="select_font">
<div class="select_font">详情</div>
<div class="select_font">编辑</div>
<div class="select" onclick="dale(${viewData[i].id})">删除</div>
<div class="select">拉黑</div>
</div>
</div>
</div>`;
} else if (viewData[i].grade != null) {
data_inner += `<div class="form_table">
<div id="form_chechbox">
<input type="checkbox" name="" id="">
</div>
<div id="form_id">
<span>${viewData[i].id}</span>
</div>
<div id="form_name">
<span>${viewData[i].name}</span>
</div>
<div id="form_identity">
<span>${viewData[i].id_number}</span>
</div>
<div id="form_Telephone">
<span>${viewData[i].tel}</span>
</div>
<div id="form_contract">
<p>${viewData[i].entry_time}</p>
<p>${viewData[i].graduation_date}</p>
</div>
<div id="form_employment">
<span>${viewData[i].title}</span>
</div>`
if (viewData[i].pname != null) {
data_inner += `<div id="form_item">
<span>${viewData[i].pname}</span>
</div>`
} else if (viewData[i].pname == null) {
data_inner += `<div id="form_item">
<span></span>
</div>`
}
data_inner += `<div id="fork_beforepost">
<span>${viewData[i].jobs}</span>
</div>`;
if (viewData[i].grade == null) {
data_inner += `<div id="form_stalls">
<span></span>
</div>`
} else if (viewData[i].grade != null) {
data_inner += `<div id="form_stalls">
<span>${viewData[i].grade}</span>
</div>`;
}
if (viewData[i].status == '在职') {
data_inner +=
`<div id="form_status"><span style="color: rgb(126, 156, 255);">${viewData[i].status}</span></div>`
} else if (viewData[i].status == '离职') {
data_inner +=
`<div id="form_status"><span style="color: rgb(220, 20, 60);">${viewData[i].status}</span></div>`
}
data_inner += `<div id="form_operate">
<button>更多<img src="img/errowimg.png" alt=""></button>
<div id="select_font">
<div class="select_font">详情</div>
<div class="select_font">编辑</div>
<div class="select" onclick="dale(${viewData[i].id})">删除</div>
<div class="select">拉黑</div>
</div>
</div>
</div>`;
}
}
$("#form").html(data_inner)
let Pagecount = Math.ceil(data.info.length / page.pageSize);
// console.log(Pagecount);
let three = "";
for (let i = 0; i < Pagecount; i++) {
let is = i + 1;
if (page.currentPage - 1 == i) {
three += '<div onclick="previous_span(' + i +
')" class="span_iner" style="background-color: #409EFF;width:2vw;color:white">' +
is + '</div> ';
} else {
three += '<div onclick="previous_span(' + i +
')" style="width:2vw;background-color:#F0F2F5;" class="span_iner">' + is +
'</div> ';
}
}
$("#but").html(three)
},
})
}
title()
// 上一页
function bou() {
if (page.currentPage > 1) {
page.currentPage--;
console.log(page.currentPage);
title()
} else if (page.currentPage == 1) {
alert('第一页')
}
}
// 下一页
function bottom() {
console.log(page.total);
console.log(Math.ceil(page.total / page.pageSize));
if (page.currentPage != Math.ceil(page.total / page.pageSize)) { //判断当前页面不等于总条数除于每页多少条
page.currentPage++;
title()
} else if (page.currentPage == Math.ceil(page.total / page.pageSize)) { //判断当前页面等于总条数除于每页多少条
alert('最后一页')
}
}
// 点击哪个数字跳到相应的页数
function previous_span(i) {
// let price_val = document.getElementById('price').innerText;
// console.log(price_val);
// price_val = 2;
// console.log(price_val);
let span_iner = document.getElementsByClassName('span_iner');
page.currentPage = i + 1;
console.log(page.currentPage);
title()
}
</script>ps：这里面使用的是接口，需吧接口和数据修改即可！！！
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
