ReStable是一款轻量级的jQuery响应式表格插件。该响应式表格插件可以在指定的响应式断点时,将表格结构切换为无序列表结构,以适应在小屏幕设备中显示表格数据。
使用方法
在页面中引入jquery/jquery.restable.min.js和jquery.restable.min.css文件。
<link rel="stylesheet" type="text/css" href="css/jquery.restable.min.css" /> <script type="text/javascript" src="path/to/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.restable.min.js"></script>
HTML结构
该表格采用基本的HTML表格结构:
<table class="mytable"> <thead> <tr> <td>表格头1</td> <td>表格头2</td> <td>表格头3</td> <td>表格头4</td> </tr> </thead> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> </tr> <tr> <td>单元格5</td> <td>单元格6</td> <td>单元格7</td> <td>单元格8</td> </tr> <tr> <td>单元格9</td> <td>单元格10</td> <td>单元格11</td> <td>单元格12</td> </tr> </tbody> </table>
初始化插件
在页面DOM元素加载完毕之后,可以通过ReStable()
方法来初始化该响应式表格插件。
$(document).ready(function () { $('.mytable').ReStable(); });
上面的方法将页面中所有的表格都进行初始化。你也可以单独对某个表格进行初始化。
$(document).ready(function () { $('.mytable').ReStable(); });
配置参数
该响应式表格插件的可用参数如下:
$('.mytable').ReStable({ rowHeaders: true, maxWidth: 480, keepHtml: false });
rowHeaders
:是否显示表格头。maxWidth
:响应式断点。keepHtml
:是否保持每个单元格的HTML内容。
ReStable响应式表格插件的github地址为:https://github.com/micc83/ReStable