jquery实现自定义表格数据分页多选编辑效果代码

代码语言:html

所属分类:表格

代码描述:jquery实现自定义表格数据分页多选编辑效果代码

代码标签: 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