我从使用百里香叶表转变为在代码中使用数据表。我一直在尝试找到一种向表行添加按钮的方法,以使其与该行的ID有关。例如在百里香中我用
<a th:href="@{'/flash/' + ${flash.flashcard_id}}"><button title="View" data-toggle="tooltip"></button></a>
但是我不确定如何在数据表中实现这一目标。
我尝试使用
{ "mData": "<button>Test</button>"}
和
{ "mData": null, "bSortable": false, "mRender": function (o) { return '<a href=#/' + o.flashcard_id+ '>' + 'View' + '</a>'; }}
但是我可能没有正确使用它们,因为我对数据表了解不多。
以前的胸腺代码
<table class="table table-striped">
<tr>
<th>Jobname</th>
<th>Flashcard Name</th>
<th>Barcode Value</th>
<th>Display Text</th>
<th>Active</th>
<th>Actions</th>
</tr>
<tr th:each="flash : ${flash}">
<td th:text="${flash.jobName}"></td>
<td th:text="${flash.flashcard_Name}"></td>
<td th:text="${flash.barcode_Value}"></td>
<td th:text="${flash.display_Text}"></td>
<td th:text="${flash.active}"></td>
<td>
<a th:href="@{'/flash/' + ${flash.flashcard_id}}"><button title="View" data-toggle="tooltip"></button></a>
<a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/update'"><button title="Update" data-toggle="tooltip"></button></a>
<a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/deactivate'"><button title="Deactivate" data-toggle="tooltip"></button></a>
<a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/activate'"><button title="Activate" data-toggle="tooltip"></button></a>
<a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/delete'"><button title="Delete" data-toggle="tooltip"></button></a>
</td>
</tr>
</table>
当前数据表代码
<table id="flashTable" class="display">
<thead>
<tr>
<th>Jobname</th>
<th>Flashcard</th>
<th>Barcode</th>
<th>Display</th>
<th>Active</th>
<th>Actions</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var table = $('#flashTable').DataTable({
"sAjaxSource": "/flashs",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "jobName"},
{ "mData": "flashcard_Name" },
{ "mData": "barcode_Value" },
{ "mData": "display_Text" },
{ "mData": "active" },
{ "mData": "<button>Test</button>"}
]
})
});
</script>
我想寻找一种方法,当按下相应按钮时,将抽认卡的ID和部分url组合到网站的不同位置。只是不确定如何将其转换为数据表,在百里香中它可以正常工作。任何帮助都会很棒。
答案 0 :(得分:2)
您正在使用旧版的数据表,因此在语法上可能略有偏离,但是您将使用ColumnDefs覆盖呈现行为。这使您可以指定目标列(向其应用渲染函数的列索引)和一个渲染函数,该函数具有dataField的参数(在aColumn的mData部分中指定)和完整的对象(第3个参数)。有关更多信息,请参见https://legacy.datatables.net/usage/columns
<table id="flashTable" class="display">
<thead>
<tr>
<th>Jobname</th>
<th>Flashcard</th>
<th>Barcode</th>
<th>Display</th>
<th>Active</th>
<th>Actions</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var table = $('#flashTable').DataTable({
"sAjaxSource": "/flashs",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "jobName"},
{ "mData": "flashcard_Name" },
{ "mData": "barcode_Value" },
{ "mData": "display_Text" },
{ "mData": "active" },
{ "mData": "flashcard_id"}
],
"aoColumnDefs": [
{
"aTargets" : [5],
"mRender": function(dataField, callType, fullRowObj) {
return '<a href=#/' + dataField + '>' + 'View ' + fullRowObj.flashcard_Name + '</a>';
}
}
]
})
});
</script>