本文展示了如何使用HTML、CSS和JavaScript实现一个具有分页功能的表格，包括表格样式设计、行悬浮变色、单元格内容溢出处理以及分页条的创建和交互。此外，还提供了数据加载、分页切换和点击按钮的处理逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 用于设置layui table 背景透明 -->
<style type="text/css">
/* 禁止文本被选取 */
.no-select-text{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ------ 表格部分样式开始 ------ */
/* 表格样式 */
#pollutantList {
width: 590px; /* 需要给表格设一个宽度，否者td的文本超出后显示三个点不生效 */
border-collapse:collapse; /* 边框会合并为一个单一的边框 */
table-layout:fixed; /* 设置表格布局 */
}
/* 表格标题样式 */
#pollutantList .thead-title-show{
height: 40px;
font-size: 18px;
text-align: center;
}
/* 设置按钮样式 */
#pollutantList .table-button-style{
cursor:pointer;
width: 44px;
height: 30px;
color: rgba(220, 220, 220, 1);
background-color: rgba(59, 142, 181, 1);
border: none;
border-radius: 3px;
}
/* 单元格样式 */
#pollutantList td{
border: #cccccc solid 1px;
color: #eeeeee;
padding: 3px;
height: 24px;
font-size: 16px;
width:100%;
word-break: keep-all; /*在恰当的断字点进行换行 */
white-space: nowrap; /* 规定段落中的文本不进行换行 */
overflow: hidden; /* 当内容溢出元素框时发生的事情 */
text-overflow: ellipsis; /* 当文本溢出包含元素时发生的事情, ellipsis含义为省略号 */
}
/* 行悬浮变色 */
#pollutantList tbody tr:hover{
cursor:pointer;
background-color: rgba(200, 200, 200, 0.5);
}
/* ------ 表格部分结束 ------ */
/* ------ 分页条部分开始 ------ */
/* 分页条样式 */
#pageBar{
float: right;
margin-top: 10px;
}
/* 分页部分的 ul 样式 */
#pageBar #pageToolBar{
float: left;
display: block;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
/* 分页部分的 li 元素样式 */
#pageBar #pageToolBar li{
float: left;
list-style: none;
font-size: 16px;
color: #cccccc;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
background-color: rgba(20, 20, 20, 0.5);
margin-left: 3px;
margin-left: 3px;
border-radius: 3px;
}
/* li的悬浮样式 */
#pageBar #pageToolBar li:hover{
cursor:pointer;
background-color: rgba(200, 200, 200, 0.5);
}
/* 点击后切换的样式 */
#pageBar #pageToolBar .select-item{
color: rgba(20, 20, 20, 0.8);
background-color: rgba(200, 200, 200, 1);
}
/* 修改当前页大小的下拉框 */
#pageBar #changePageSize{
float: left;
margin-right: 5px;
}
/* 每页条数切换的 select 样式 */
#pageBar #changePageSize select{
width: 100px;
height: 30px;
padding: 2px;
font-size: 16px;
border-radius: 3px;
}
/* 去掉 select 和 input 标签的选中后的黑框，感觉留着好丑 */
#pageBar select, input:focus-visible {
outline: none;
}
/* 跳转页输入框的样式 */
#pageBar input{
font-size: 16px;
width: 40px;
border-radius: 3px;
background-color: rgba(200, 200, 200, 0.8);
height: 23px;
text-align: center;
line-height: 23px;
border: rgba(99, 99, 99, 0.9);
box-shadow: 0px 0px 0px 0px;
}
</style>
<!-- 请求工具和日期格式化工具 -->
<script type="text/javascript">
Date.prototype.format = function(fmt) {
let o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(let k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
};
ajax = function (url, data, callFun, param, options) {
this.defaults = {
type : 'POST',
async : true,
dataType : 'json',
traditional : false,
contentType : 'application/x-www-form-urlencoded;charset=utf-8'
};
let settings = $.extend({}, this.defaults, options);
if(url) {
if(url.indexOf('?') > 0) {
url += '&_i='+ Math.random();
} else {
url += '?_i='+ Math.random();
}
}
$.ajax({
url: url,
data: data,
type : settings.type,
async : settings.async,
dataType : settings.dataType,
traditional : settings.traditional,
contentType : settings.contentType,
success: function(data){
callFun(data,param);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
//alert("服务器错误");
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
console.log(this);
}
});
};
</script>
<!-- 以下引入的私有样式和JS，去掉后对绘制表格没有影响 -->
<link rel="stylesheet" href="css/sdeie-panels.css">
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="js/sdeie-ui.js"></script>
<script src="js/tween.js"></script>
<script src="js/sdeie-panels.js"></script>
</head>
<!-- 背景图片也可以去掉 -->
<body background="../img/bg.png" class="no-select-text">
<!-- 表格容器 -->
<div id="tableInfo"></div>
</body>
</html>
<script>
let baseUrl = "http://localhost:8066";
//表头部分图省事，直接写死了，包括工具条部分图省事也是写死的，感兴趣可以自己将其抽出来
let table = `
<table id="pollutantList">
<thead>
<tr>
<td class="thead-title-show" style="width: 100px">名称</td>
<td class="thead-title-show" style="width: 120px">CAS</td>
<td class="thead-title-show" style="width: 275px">别名</td>
<td class="thead-title-show" style="width: 76px">操作</td>
</tr>
</thead>
</table>
<div id="pageBar">
<div style="float: left;color: rgba(200, 200, 200, 1); font-size: 16px; margin-right: 10px; margin-top: 3px;">共 <span id="totalPage"></span> 条</div>
<div id="changePageSize"></div>
<ul id="pageToolBar"></ul>
<div style="float: left;margin-left: 10px; margin-right: 10px;margin-top: 3px; font-size: 14px;line-height: 23px; color: rgba(200, 200, 200, 1)">
前往 <input type="input" > 页
</div>
</div>`;
/**
* 创建数据面板(这里主要是创建了一个可以移动的面板，然后将上面的表格DOM对象放到了里面)
* 没有这个工具可以将上面的 table 变量放到 tableInfo 下面去，因为我这里只是记录，所以...懒得去了
*/
let panel = new SdeiePanel({type:1, title:"危险化学品列表", width:600, height: 435, topButton:true, absolute:true, left:600, top:100, content: table});
panel.show(document.getElementById("tableInfo"));
//清除表格数据
function clearTableData(){
let table = document.getElementById("pollutantList");
let body = table.getElementsByTagName("tbody");
if(body.length > 0) {
body[0].innerHTML = "";
}
}
//表格绘制
function dragTable(value){
clearTableData();//清空表格
if(value){ //存在值
let table = document.getElementById("pollutantList"); //取表格Dom
let body = table.getElementsByTagName("tbody");//取其tbody对象，不存在则创建tbody对象。body是个数组对象
if(body.length == 0){
body = document.createElement("tbody");
table.appendChild(body);
}else {
body = body[0];
}
//开始按照表头绘制，这里的item是对应返回的属性名称，show没有什么意义，主要是为了在表格后面多加一列，这里是为了放置查看按钮
let items = ["name", "cas", "alias", "show"]
for (let item of value){
let tr = document.createElement("tr");
for (let key of items){
let td = document.createElement("td");
if(item[key]){
td.innerText = item[key]
} else {
td.style.textAlign = "center";
let button = document.createElement("button");
button.className = "table-button-style";
button.innerText = "查看"
button.onclick = function () {
clickButton(this);
}
td.appendChild(button);
}
tr.appendChild(td);
}
body.appendChild(tr);
}
}
}
/**
* 点击表格中的button的后，取当前行对象后，取其第一个元素
* children代表了当前行的tr对象
* 具体要做啥，可以自定义
*/
function clickButton(that) {
let children = that.parentNode.parentNode.children;
console.log(children[0].innerText);//作为查询条件，也可以是其它内容
}
//开始画分页条
function dragPageBar(){
document.getElementById("totalPage").innerText = page.totalSize
let pageBar = document.getElementById("pageToolBar");
pageBar.innerHTML = "";
let maxShowPage = 5;
let maxPage = Math.ceil(page.totalSize / page.pageSize);//得到最后一页的页码
let diff = maxPage - page.current;
let start, end;
//接近最后页
if(diff <= 2){
start = maxPage - maxShowPage + 1; //要把当前页也包含进去，所以要 + 1
end = maxPage;
} else {
//如果当前页小于等于第三页
if(page.current <= 3){
start = 1;
end = maxShowPage;
} else {
start = parseInt(page.current) - 2;
end = parseInt(page.current) + 2;
}
}
if(start <= 0){
start = 1;
}
if(end <= 0){
end = 1;
}
//开始画分页条
for (let i = start; i <= end; i++) {
let item = document.createElement("li");
item.innerText = i;
if(i === parseInt(page.current)){
item.classList.add("select-item");
}
item.onclick = function () { changePage(this.innerText) }; //添加点击事件
pageBar.appendChild(item);
}
}
/**
* 修改页码，刷新表格数据
*/
function changePage(pageIndex){
if (/^\d+$/.test(pageIndex)){ //数字情况
page.current = parseInt(pageIndex);
let pageBar = document.getElementById("pageToolBar");
let select = pageBar.getElementsByClassName("select-item");
//移除已有选中样式
if(select.length > 0){
for (let dom of select){
dom.classList.remove("select-item");
}
}
loadData();
} else {
console.log(pageIndex);
}
}
//分页对象
let page = {
totalSize: 0, //总数据条数
current: 1, //当前页码
pageSize: 8, //每页数据条数
pages: [4, 8] //分页可选择每页多少条
}
/**
* 加载后台数据
*/
function loadData(){
ajax(baseUrl + "/pollutant/search", {page: page.current - 1, limit: page.pageSize}, function (res) {
if(res.code == 1){
page.totalSize = res.total;
dragTable(res.data);
dragPageBar();
}
})
}
/**
* 判断输入框的值，若非正整数，则将其设置为空。
* @param that 输入框对象
*/
function updateInputValue(that) {
if (!/^\d+$/.test(that.value)){
that.value = "";
}
}
/**
* 初始化分页条的分页条的每页条数选择 和 跳转页功能
*/
function initPageSelect() {
// ----- 开始select绘制和设置
let selectArea = document.getElementById("changePageSize");
let select = document.createElement("select");
selectArea.appendChild(select);
for (let dataSize of page.pages) {
let option = document.createElement("option");
option.value = dataSize;
option.innerText = dataSize + " 条/页";
select.appendChild(option);
}
select.onchange = function (){ //切换Option
page.pageSize = parseInt(this.value);
loadData();
}
select.value = page.pageSize;
// ------ select 结束
// ----- 开始跳转页
let pageBar = document.getElementById("pageBar");
let input = pageBar.getElementsByTagName("input")[0];//这里就不校验了，就这一个input
input.oninput = function () { updateInputValue(this) }
input.onblur = function () {
if(this.value > 10000 || this.value <= 0){
console.log("页码异常，直接设为第一页")
this.value = 1;
}
let totalPage = Math.ceil(page.totalSize / page.pageSize);
if(this.value >= totalPage){
this.value = totalPage;
}
page.current = this.value;
loadData();
}
}
//请求结果数据返回数据的格式
let res = {
"total": 3,
"code": 1,
"data": [
{
"code": "无",
"cas": "8006-61-9",
"name": "汽油",
"alias": "汽油,Gasoline,Petrol"
},
{
"code": "无",
"cas": "8030-30-6",
"name": "石脑油",
"alias": "粗汽油,石脑油,Crude oil"
},
{
"code": "无",
"cas": "133-74-0",
"name": "氢气",
"alias": "氢,氢气,hydrogen"
},
{
"code": "a25002",
"cas": "71-43-2",
"name": "苯",
"alias": "苯,benzene"
},
{
"code": "a99049",
"cas": "75-44-5",
"name": "碳酰氯",
"alias": "光气,碳酰氯,carbonyl chloride,Phosgene"
}
]
};
//这里用的是写死的数据，可以将以下的四个方法写到一个init方法里面，调用就行了
page.totalSize = res.total;
dragTable(res.data)
dragPageBar();
initPageSelect();
</script>以下是我这里的最终效果图
没有数据接口，效果最开始的时候，应该是如下所示。当然，是没有背景框的那种...
因为我这里没办法用VUE，所以做了一份。记录一下....
tip: 英语不好，起名比较随意，轻点喷。
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
