使用Node + Jade我创建了一个显示大量用户列表的表,所以我决定使用bootstrap-table,我找到了一个很有可能的很棒的库。
我目前正在使用分页在表中不显示尽可能多的信息,目前表只有两列,第一列是选择多个用户的复选框,第二列只是用户名用户。该表看起来很棒,但我会添加一个链接来带我详细说明用户(例如:/ user /:id)并将此链接添加到我的第二列。
目前我的代码如下:
table(data-toggle='table', data-url='users.json', data-pagination='true', data-search='true', data-striped='true')
thead
tr
th(data-checkbox='true')
th(data-field='username') Username
我只想添加一个包含用户名
的文本的超链接答案 0 :(得分:4)
在您的HTML表格中:
<th data-field="user_name" data-formatter="LinkFormatter">Computer</th>
在你的javascript中:
function LinkFormatter(value, row, index) {
return "<a href='/userid/id:"+row.id+"'>"+value+"</a>";
}
答案 1 :(得分:0)
HTML
<table id="table_exemple" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="name">Nome</th>
<th data-field="action" data-formatter="ActionFormatter">Details</th>
</tr>
</thead>
<tbody></tbody>
</table>
JAVASCRIPT
var bootstrap_table = $('#table_exemple');
function AddRow(obj){
bootstrap_table.bootstrapTable('insertRow', {
index: 0,
row: {
id: obj.id,
name: obj.name,
action: obj.id
}
});
}
function ActionFormatter(value) {
return '<a href="javascript:void(0)" onclick="Details('+ value +')">Details</a>';
}
function Details(id){
...
}