Question

我从使用百里香叶表转变为在代码中使用数据表。我一直在尝试找到一种向表行添加按钮的方法，以使其与该行的ID有关。例如在百里香中我用

<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>'; }}

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

以前的胸腺代码

<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组合到网站的不同位置。只是不确定如何将其转换为数据表，在百里香中它可以正常工作。任何帮助都会很棒。

Answer 1

您正在使用旧版的数据表，因此在语法上可能略有偏离，但是您将使用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>

如何将自定义网址添加到数据表

1 个答案: