Table 使用 Stackable.js 过滤 - （如何复制 <tr> 数据属性？）

Question

我正在使用 stackable.js 来响应 table。这非常适合生成移动友好的 table（但是）我也在尝试合并一个需要数据属性才能工作的 table 过滤器。不幸的是，这些数据属性不会复制到 table 的移动版本，所以我需要弄清楚如何修改脚本以包含它们。

我设法使用 jQuery .data() 和 for 循环解决了一些问题。

var data = $(this).data(),
    tr_data = [];

for(key in data) {
    tr_data.push("data-"+key + "=" + data[key]);
}

这通过 <tr> 循环以收集所有属性对并将它们推送到一个数组。但是，将数组添加到标记时，附加属性的格式不正确。

他们复制到手机 table < tr > 但是引号放错了地方，需要删除逗号 -（见下文）。

data-tags="Tag" 2,data-priority="Urgent,data-milestone=Milestone" 2,data-status="In" progress,data-assigneduser="Larry,data-taskId=1"

属性“应该”匹配桌面格式 -（见下文）。

data-task-id="1" data-assigned-user="Larry" data-status="In Progress" data-milestone="Milestone 2" data-priority="Urgent" data-tags="Tag 2"

CodePen 在这里： https://codepen.io/jinch/pen/JjJbzww?editors=0010

– 第 125 行是创建数组的地方。

– 第 135、#142、#145 行 ~ 是将“tr_data”变量数组添加到标记的位置。

我做错了什么？

Answer 1

我通过在属性值 "'"+data[key]+"'" 周围添加引号设法解决了格式问题。还使用连接方法 '+tr_data.join(" ") +' 删除逗号。

var data = $(this).data(),
    tr_data = [];

    for(key in data) {
      tr_data.push("data-"+key + "=" + "'"+data[key]+"'");
 }

这是我如何将数组添加到标记的一个示例：

bodyMarkup += '<tr class="' + tr_class +'" '+tr_data.join(" ") +'>';

如果需要使用 stackable.js 的 table 过滤器 ~ 这是一个工作代码笔： https://codepen.io/jinch/pen/JjJbzww?editors=0010

Table Filter with Stackable.js - (How to copy <tr> data-attributes?)