jQuery响应表格布局插件 兼容移动端

演示  website 下载

插件介绍

这是一款基于jQuery响应表格解决方案，兼容移动端显示。该插件检测屏幕大小，并将HTML表格转换为移动友好的卡片布局，其中表格数据使用基于字符串的模板呈现。

使用方法

1.首先，在HTML页面上包含jquery库和插件文件。

<link rel="stylesheet" href="jquery.tablecards.css" />
<script src="jquery.min.js"></script>
<script src="jquery.tablecards.js"></script>

2. 调用HTML表上的函数并确定插件在哪个断点处将表转换为卡片。

$('#mytable').TableCards({
  width: 468
});

3.确定在卡片布局上运行时如何呈现表格数据。

$('#mytable').TableCards({
  width: 468,
  head: "Custom Header",
  body: "<b>@%2 - %3</b><br>%5<br>%6",
  foot: 'Custom Footer'
  tokenstart: '%'
});

4. 确定标题中保留哪些列。

$('#mytable').TableCards({
  extracols: [1]
});

5.初始化方法。

$('#mytable').TableCards({
  postinit: function(){}
});

6. 处理事件。

$('#mytable')
.on('tablecards:mode', function() {
  $(this).trigger('table:columnschanged');
})
.on('table:datachanged', function() {
  $(this).trigger('tablecards:datachanged');
})
.on('table:resized', function() {
  $(this).trigger('tablecards:resize');
});