javascript - 如何将自定义 url 添加到数据表

Question

我从使用 thymeleaf 表转变为在代码中使用数据表。我一直在尝试找到一种方法来将按钮添加到表行中，以便它与该行的 id 相关。例如在 thymeleaf 中我使用

<a th:href="@{'/flash/' + ${flash.flashcard_id}}"><button title="View" data-toggle="tooltip">&#xE417;</button></a>

但我不确定如何在数据表中实现这一点。

我尝试过使用

{ "mData": "<button>Test</button>"}

和

{ "mData": null, "bSortable": false, "mRender": function (o) { return '<a href=#/' + o.flashcard_id+ '>' + 'View' + '</a>'; }}

但我可能没有正确使用它们，因为我对数据表了解不多。

以前的 Thymeleaf 代码

<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">&#xE417;</button></a>
            <a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/update'"><button title="Update" data-toggle="tooltip">&#xE417;</button></a>
            <a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/deactivate'"><button title="Deactivate" data-toggle="tooltip">&#xE417;</button></a>
            <a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/activate'"><button title="Activate" data-toggle="tooltip">&#xE417;</button></a>        
            <a th:href="@{'/flash/' + ${flash.flashcard_id}} + '/delete'"><button title="Delete" data-toggle="tooltip">&#xE417;</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 结合起来，以便在按下相应按钮时转到网站的不同位置。它在 thymeleaf 中运行良好，只是不确定如何将其转换为数据表。任何帮助都会很棒。

Answer 1

您使用的是数据表的旧版本，因此这可能在语法上略有偏差，但您可以使用 ColumnDefs 来覆盖渲染行为。这允许您指定目标列(要应用渲染函数的列的索引)和渲染函数，该函数具有 dataField 的参数(在 aoColumn 的 mData 部分中指定)以及完整对象(第三个参数)。请参阅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>