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