bootstrap datatable加载数据（BootstrapTable使用教程请求json数据渲染表格）
bootstrap datatable加载数据（BootstrapTable使用教程请求json数据渲染表格）6：格式化时间，将后端传过来的时间转化，比如后端传的时间戳："visitTime":1572502840091 通过代码转化成时分秒的格式2019-10-31 14:205：将后端传过来的性别等进行判断，后端0，1渲染的时候判断男女2：定义删除按钮功能、获得要删除的数据，声明一个数组，通过获得别选中的来进行遍历，cid为获得到的整条数据中的一列，前端删除就没写了，直接后端删除，删除掉数据库内容，在执行刷新表格即可删除。3：编辑按钮，编辑按钮的时候会弹出form表单，节省篇幅，留一个编辑按钮的点击事件，可自行测试。4：表格的内容过长的时候，整个表格会变得不那么美观，有些内容会占据两行，但是表格稀稀疏疏，优化的时候做到将超过的内容隐藏起来，以达到自适应的要求。
Tips：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子
今天来写一个关于Bootstrap Table使用教程（请求json数据渲染表格），json数据来源于后端小伙伴的接口，我放在本地进行模拟了
涉及到的知识点
1：Bootstrap Table使用教程，基本请求，将请求过来的数据进行分页，每页5条内容，也可以选择每页15条，20条或者更多。
2：定义删除按钮功能、获得要删除的数据，声明一个数组，通过获得别选中的来进行遍历，cid为获得到的整条数据中的一列，前端删除就没写了，直接后端删除，删除掉数据库内容，在执行刷新表格即可删除。
3：编辑按钮，编辑按钮的时候会弹出form表单，节省篇幅，留一个编辑按钮的点击事件，可自行测试。
4：表格的内容过长的时候，整个表格会变得不那么美观，有些内容会占据两行，但是表格稀稀疏疏，优化的时候做到将超过的内容隐藏起来，以达到自适应的要求。
5：将后端传过来的性别等进行判断，后端0，1渲染的时候判断男女
6：格式化时间，将后端传过来的时间转化，比如后端传的时间戳："visitTime":1572502840091 通过代码转化成时分秒的格式2019-10-31 14:20
这里推荐一个时间戳转换工具：[https://tool.lu/timestamp/]，(https://tool.lu/timestamp/)有兴趣的小伙伴可以去看一下。
image.png
话不多说，上代码，里面的引入文件可以直接去官网下载，这里为了使用方便，用的是cdn引入，建议将下载到本地哦。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <a href="javascript:;" id="remove"><span class="hidden-480">删除</span></a> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ method: 'get' url: "test.json" // 请求路径 striped: true // 是否显示行间隔色 pageNumber: 1 // 初始化加载第一页 pagination: true // 是否分页 sidePagination: 'client' // server:服务器端分页|client：前端分页 pageSize: 5 // 单页记录数 pageList: [5 20 30] // showRefresh : true // 刷新按钮 queryParams: function(params) { // 上传服务器的参数 var temp = { name: $("#sname").val() viewReason: $("#viewReason").val() }; return temp; } columns: [{ checkbox: true } { title: 'id' field: 'id' visible: false } { title: '设备编号' field: 'deviceId' } { title: '姓名' field: 'name' } { title: '性别' field: 'sex' formatter: formatSex } { title: '证件号码' cellStyle: formatTableUnit formatter: paramsMatter field: 'card' } { title: '联系电话' field: 'phone' } { title: '被访姓名' field: 'viewPeople' } { title: '来访事由' field: 'viewReason' formatter: formatReason } { title: '来访时间' field: 'visitTime' formatter: formatTime } { title: '是否离开' field: 'isLeave' formatter: formatIsLeave } { title: '操作' field: 'id' formatter: option }] }) // 定义删除、更新按钮 function option(value row index) { var htm = ""; htm = '<button id="dupdevice" deviceId="' value '" onclick="updDevice(' value ')">编辑</button>' return htm; } //表格超出宽度鼠标悬停显示td内容 function paramsMatter(value row index) { var span = document.createElement("span"); span.setAttribute("title" value); span.innerHTML = value; return span.outerHTML; } //td宽度以及内容超过宽度隐藏 function formatTableUnit(value row index) { return { css: { "white-space": "nowrap" "text-overflow": "ellipsis" "overflow": "hidden" "max-width": "60px" } } } // 格式化性别"sex": 0 是女 "sex": 1 是男 function formatSex(value row index) { return value == 1 ? "男" : "女"; } // 格式化在离厂//"isLeave": 0 是离场，"isLeave": 1 是在场 function formatIsLeave(value row index) { return value == 1 ? "离厂" : "在厂"; } // 格式化时间 function formatTime(value row index) { var date = new Date(); date.setTime(value); var month = date.getMonth() 1; var hours = date.getHours(); if(hours < 10) hours = "0" hours; var minutes = date.getMinutes(); if(minutes < 10) minutes = "0" minutes; var time = date.getFullYear() "-" month "-" date.getDate() " " hours ":" minutes; return time; } // 格式化访问理由 "viewReason": 1是面试 2是开会，3是拜访客户，4是项目实施 function formatReason(value row index) { var str; switch(value) { case 1: str = "面试"; break; case 2: str = "开会"; break; case 3: str = "拜访客户"; break; case 4: str = "项目实施"; break; default: str = "其他"; } return str; } // 删除按钮事件 $("#remove").on("click" function() { if(!confirm("是否确认删除？")) return; var rows = $("#mytab").bootstrapTable('getSelections'); // 获得要删除的数据 if(rows.length == 0) { // rows 主要是为了判断是否选中，下面的else内容才是主要 alert("请先选择要删除的记录!"); return; } else { var ids = new Array(); // 声明一个数组 $(rows).each(function() { // 通过获得别选中的来进行遍历 ids.push(this.id); // cid为获得到的整条数据中的一列 }); //后端删除的方法 deleteMs(ids) } }) // 删除访客 删除数据库内容，刷新表格即可删除 function deleteMs(ids) { $.ajax({ url: basePath "/caller/dels?ids=" ids dataType: "json" type: "get" success: function(data) { if(data > 0) { msg(6 "操作成功") $('#mytab').bootstrapTable('refresh' { url: basePath '/caller/list' }); } } }); } // 编辑访客 function updDevice(id) { alert("编辑") } </script> </body> </html>
test.json
[ { "id": 139 "deviceId": "3" "name": "424" "sex": 0 "viewReason": 1 "viewPeople": "4" "card": "340823199308151524" "isLeave": 1 "phone": "13661725475" "organId": 1 "organName": "字节跳动" "companyId": 1 "visitTime": 1572502840091 "fenceId": "20191031142032" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } { "id": 140 "deviceId": "EAFA6CCF3CDD" "name": "访客围栏测试1" "sex": 0 "viewReason": 2 "viewPeople": "测试" "card": "" "isLeave": 0 "phone": "" "organId": 1 "organName": "字节跳动" "companyId": 1 "visitTime": 1572512489920 "fenceId": "2019103117129" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } { "id": 140 "deviceId": "EAFA6CCF3CDD" "name": "访客围栏测试2" "sex": 1 "viewReason": 1 "viewPeople": "测试" "card": "" "isLeave": 0 "phone": "" "organId": 1 "organName": "字节跳动" "companyId": 1 "visitTime": 1572512489920 "fenceId": "2019103117129" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } { "id": 140 "deviceId": "EAFA6CCF3CDD" "name": "访客围栏测试3" "sex": 1 "viewReason": 1 "viewPeople": "测试" "card": "" "isLeave": 0 "phone": "" "organId": 1 "organName": "字节跳动" "companyId": 1 "visitTime": 1572512489920 "fenceId": "2019103117129" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } { "id": 140 "deviceId": "EAFA6CCF3CDD" "name": "访客围栏测试4" "sex": 1 "viewReason": 1 "viewPeople": "测试" "card": "" "isLeave": 0 "phone": "" "organId": 1 "organName": "字节跳动" "companyId": 1 "visitTime": 1572512489920 "fenceId": "2019103117129" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } { "id": 142 "deviceId": "公寓i467ty8" "name": "跳跳21鱼" "sex": 1 "viewReason": 1 "viewPeople": "11" "card": "3408231234567851524" "isLeave": 0 "phone": "13661725475" "organId": 1 "organName": "212联" "companyId": 1 "visitTime": 1572513935374 "fenceId": "20191031172532" "headUrl": "http://localhost:8081/pion/images/cmao.jpg" "organIds": null } ]
