jquery实现自定义表格数据分页多选编辑效果代码
代码语言:html
所属分类:表格
代码描述:jquery实现自定义表格数据分页多选编辑效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
outline: none;
}
body {
font-size: 12px;
color: #000;
font-family: "微软雅黑";
}
.digital {
width: 65%;
margin: 30px auto;
}
.digitalTitle {
height: 60px;
line-height: 60px;
font-size: 16px;
}
.CAButtonS {
margin: 20px 0;
}
table.dataTable tbody tr, .reseachIput, #tablesLength > label > select, #tablesPageinate .pageinateBtn {
background: #03152E;
}
.requestBtn {
vertical-align: baseline;
margin-left: 16px;
}
#userImportTable {
background: #003975;
color: #fff;
border: none !important;
text-align: center;
margin: 20px 0;
}
#userImportTable tr {
height: 40px;
line-height: 40px;
}
/*自定义表格格式*/
table tbody tr, .reseachIput, #tablesLength > label > select, #tablesPageinate .pageinateBtn {
background: #03152E;
}
.reseachIputCertificate {
height: 40px;
width: 500px;
background: #03152E;
border-radius: 4px;
border: none;
padding: 0 6px;
color: #fff;
}
.uploadDigital {
/*border: 1px solid red;*/
}
.uploadDigitalLabel {
/*width: 510px;*/
float: right;
}
.uploadDigitalInput {
width: 300px;
background: #03152E;
border: none;
height: 40px;
border-radius: 4px;
color: #fff;
padding: 0 6px;
margin-right: 16px;
vertical-align: middle;
}
.digitalTop {
margin-bottom: 7px;
}
.userImportTableBottom {
/*color: #fff;*/
}
.userImportTableBottom .dataTablesInfo {
float: left;
}
.userImportTableBottom .tablePageinate, .userImportTableBottom .digitalLength {
float: right;
}
.userImportTableBottom .digitalLength {
float: right;
padding-top: 0.25em;
margin-right: 20px;
}
.userImportTableBottom .digitalLength select {
background: #03152E;
border: none;
border-radius: 4px;
color: #fff;
margin: 0 4px;
padding: 4px;
}
.tablePageinate .pageinateBtn.current {
width: 30px;
height: 30px;
font-size: 12px;
background: #0589E0;
text-align: center;
line-height: 30px;
border-radius: 4px;
color: #fff !important;
border: none !important;
}
#pageNext:hover, #pagePrevious:hover, .tablePageinate .pageinateBtn:hover {
background: #0589E0;
cursor: pointer;
}
.tablePageinate .disabled {
cursor: no-drop !important;
}
#pageNext, #pagePrevious, .tablePageinate .pageinateBtn {
display: inline-block;
width: 30px;
height: 30px;
margin: 0px 2px;
font-size: 12px;
background: #03152E;
text-align: center;
line-height: 30px;
border-radius: 4px;
color: #fff !important;
border: none !important;
}
.userImportTableBottom .dataTablesInfo > button {
color: #fff;
margin-left: 20px;
}
.clearBoth {
clear: both;
}
.selectedNumDigital {
color: #0589E0;
margin: 0 2px;
}
.importBtns {
text-align: center;
margin-top: 20px;
}
.importBtns > button {
height: 38px;
line-height: 38px;
border: none;
color: #fff;
margin: 0 6px;
}
.roleSlect {
background: #03152E;
padding: 4px 6px;
border: none;
color: #fff;
}
.reminder {
font-size: 13px;
text-align: center;
background: #03152E;
height: 40px;
color: #fff;
margin-top: -20px;
margin-bottom: 20px;
line-height: 40px;
}
/*.showDatas{
text-align: center;
}*/
.showDatasBtn, .checkBtn {
background: #0589E0;
border: none;
color: #fff;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
opacity: 0.8;
}
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>
<div class="digital">
<!-- 中间表格部分 S-->
<table width="100%" id="userImportTable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th id="userImportAllTd"><input type="checkbox" name="userImportAll"></th>
<th>名称</th>
<th>账号</th>
<th>角色</th>
<th>用户组</th>
<th>号码</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="reminder"><p>没有检索到数据</p></div>
<div class="userImportTableBottom">
<!--显示已选中数据,可进行批量操作-->
<div class="dataTablesInfo" role="status" aria-live="polite">
<span>已选中<span class="selectedNumImport">0</span>项</span>
</div>
<!--显示页码数,前翻页,后翻页,当前页码-->
<div class=" tablePageinate">
</div>
<!--可选择每页暂时数据条数-->
<div class="digitalLength">
<label>
每页显示
<select name="tablesLength" class="tablesLength" onchange="changePages(this.value)">
<!--<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>-->
</select>
</label>
</div>
<!--消除浮动效果,防止影响后面的布局-->
<div class="clearBoth"></div>
</div>
<!-- 中间表格部分 E-->
<!--展示所选数据的按钮-->
<div class="showDatas">
<button class="showDatasBtn" onclick="showDatas()">展示所选数据</button>
</div>
</div>
</div>
</body>
<script>
/*模拟数据 S*/
var jsonData = {
"role": [
"日志审计员",
"运维管理员",
"密码保管员",
"系统管理员",
"操作员"
],
"status": 1,
"mesg": "获取用户信息成功",
"data": [
{
"description": "",
"name": "1号报到",
"store_dir": "",
"email": "",
"id": 0,
"group": "",
"role": "\u7cfb\u7edf\u7ba1\u7406\u5458",
"phone": "",
"username": "Administrator",
"department": ""
}, {
"description": "",
"name": "",
"store_dir": "",
"email": "",
"id": 1,
"group": "",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "Guest",
"department": ""
}, {
"description": "",
"name": "",
"store_dir": "",
"email": "",
"id": 2,
"group": "Domain Controllers",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "WIN-80CEFTKIECB$",
"department": ""
}, {
"description": "",
"name": "",
"store_dir": "",
"email": "",
"id": 3,
"group": "",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "krbtgt",
"department": ""
}, {
"description": "",
"name": "三哥",
"store_dir": "",
"email": "",
"id": 4,
"group": "\u8f6f\u4ef6\u7814\u53d1\u90e8/WEB\u524d\u7aef",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "lmawful",
"department": ""
}, {
"description": "",
"name": "李三",
"store_dir": "",
"email": "",
"id": 5,
"group": "\u8f6f\u4ef6\u7814\u53d1\u90e8/WEB\u524d\u7aef",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "jlx",
"department": ""
}, {
"description": "ewqrfadfassadsfasfd",
"name": "高级",
"store_dir": "",
"email": "dadsa@ada.com",
"id": 6,
"group": "\u8f6f\u4ef6\u7814\u53d1\u90e8/WEB\u524d\u7aef",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "15035125625",
"username": "lzm3",
"department": "adad123121"
}, {
"description": "",
"name": "成多",
"store_dir": "",
"email": "",
"id": 7,
"group": "\u8f6f\u4ef6\u7814\u53d1\u90e8/Python\u540e\u7aef",
"role": "\u8fd0\u7ef4\u7ba1\u7406\u5458",
"phone": "",
"username": "czz",
"department": ""
}, {
"description": "",
"name": "宇宇",
"store_dir": "",
"email": "",
"id": 8,
"group": "\u8f6f\u4ef6\u7814\u53d1\u90e8/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0