我有这样的东西:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th>ID</th>
<th>FieldA</th>
<th data-hide="all">FieldB</th>
<th data-hide="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
然后是这样的JS:
var fillThatTable = function (list) {
$.each(list, function (index, item) {
$('#thatTable tbody').append($('<tr>')
.append($('<td>').text(item.ID))
.append($('<td>').text(item.FieldA))
.append($('<td>').text(item.FieldB))
.append($('<td>').text(item.FieldC))
)
);
});
};
一切正常,表格获取数据并显示所有内容。当我想将 footable()
设置为该表时,问题就来了,如下所示:
$(document).ready(function () {
fillThatTable();
$('#thatTable').footable();
});
我没有得到漂亮的东西,而是收到了一个平均过滤表,几乎就像我没有放那个 $('#thatTable').footable()
一样。我检查了 JS 是导入的,它们是。是否可能是因为该表在 tbody
中没有任何内容?我错过了什么?
最佳答案
我已经更新了 PM 的 fiddle 以便更轻松地使用 FooTable:http://jsfiddle.net/0pb4x7h6/1
如果您的 html 更改为:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th data-name="ID">ID</th>
<th data-name="FieldA">FieldA</th>
<th data-name="FieldB" data-breakpoints="all">FieldB</th>
<th data-name="FieldC" data-breakpoints="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
然后您可以将脚本简化为:
$(document).ready(function () {
var list = [
{"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
{"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
{"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
];
// No need for this
//fillThatTable();
$('#thatTable').footable({
rows: list
});
});
关于javascript - 如何在用 JSON 中的 JS 填充的表中进行可操作的工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52434297/