Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

最终效果如下：

翻页后

首先把bootstrap-table.js和bootstrap-table.css下载下来。

把英文改成中文，如下：

把需要用表格的页面在

</body>前加入此JavaScript代码：

<!-- 表格分页相关 -->
<script type="text/javascript">$(document).ready(function () {$("#table_page").bootstrapTable({columns:[{field: 'name', title: '名称'},{field: 'power', title: '当前功率'},{field: 'up', title: '总调节上限'},{field: 'down', title: '总调节下限'}]})})
</script>

此时表格HTML数据如下：

<table class="table table-bordered tile" id="table_page" data-pagination="true" data-side-pagination="client" data-page-size="3"><thead><tr><th>名称</th><th>当前功率</th><th>总调节上限</th><th>总调节下限</th></tr></thead><tbody><tr><td>1</td><td>Jhon </td><td>Makinton </td><td>@makinton</td></tr><tr><td>2</td><td>Malinda</td><td>Hollaway</td><td>@hollway</td></tr><tr><td>3</td><td>Wayn</td><td>Parnel</td><td>@wayne123</td></tr><tr><td>XX</td><td>1000</td><td>1000</td><td>100</td></tr><tr><td>XX</td><td>1112</td><td>2000</td><td>500</td></tr></tbody>
</table>

Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页相关推荐

Web前端笔记-浏览器控制台调用js函数及vue函数
界面是这样的源码如下: index.html <html> <head> </head><body> <h1>Hello World< ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
web前端干货：详细了解JS前端开发框架都有哪些
1. Foundation框架 Foundation框架总体来看要比Bootstrap略显高大上一点,但他们俩的设计理念都是非常清楚的,Bootstrap有引导的意思,尝试处理你项目中的一切所需.Fo ...
Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签主体框架常用标签标题标签段落标签字体倾斜.加粗.下划线强调内容预设标签字体标签分割线实体字符图片标签视频标签音频标签 ...
Web前端笔记（5）
发展历史: 1991年八月六日,欧洲核子研究中心的科学家启动了世界上第一个可以访问的网站,从此人类宣布了互联网时代的到来,到2014年确定了HTML5标准. 1994年提出了CSS层叠样式表,知道19 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...

Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页

Web前端笔记-使用bootstrap-table.js和bootstrap-table.css使得表格分页相关推荐

最新文章

热门文章