时间戳

首页 > 解决方案 > jquery datatable - 如何从选定的行中获取值

jquery - jquery datatable - 如何从选定的行中获取值

问题描述

我有一个 jQuery 数据表，当我单击一行时，我想从单击的行中的一列中获取一个值。

我有一个用于该行的单击事件的函数，所以在这里我想获取该行的一列。单击一行时，我进入此功能就好了。

这是带有数据表和点击事件功能的视图（不是全部）。

注意：我构建每行 href 就好了，在那里我使用 row.columnname 作为我需要构建查询字符串的列。我在单击的函数中获得了 href，并且我知道我可以将 PublishedSwitch 从 href 中取出。但是，我将不再构建该查询字符串，因此它不会成为 href 的一部分。所以我现在需要从 clicked 函数中以某种方式获取该行的 publishedSwitch 。

 @section Scripts
    {
    <script type="text/javascript">

    // Declare the datatable ViewModel.
    var gbngUpdateListVM;

    $(function () {
        gbngUpdateListVM = {
        dt: null,

        init: function () {
            dt = $('#gbngupdates-data-table').DataTable({
                "serverSide": true,
                "processing": true,
                "ajax": {
                    "url": "@Url.Action("GetGbngUpdatesForMaintList", "GbngUpdateMaint")",
                    "dataType": "json",
                    "data": function (data) {
                        },
                    "error": function (error) {
                        // Set the error message from the key/value pair set in the controller: ErrorMessage = errorMessage.
                        $("#jsonErrorMessage").text(error.responseJSON.ErrorMessage);
                        // Show it.
                        $("#jsonErrorMessage").css("display", "block");
                    }
            },
                "columns": [
                    {
                          "title": "Actions",
                           "data": "GbngUpdateId",
                           "searchable": false,
                           "sortable": false,
                           "render": function (data, type, row, full, meta) {
                               return '<a href="@Url.Action("EditGbngUpdate", "GbngUpdateMaint")?gbngUpdateId=' + data + '&publishedSwitchValue=' + row.PublishedSwitch + '&canBeSeenSwitch=' + row.CanBeSeenSwitch + '" class="editGbngUpdate">Edit</a> | <a href="@Url.Action("DetailsGbngUpdate", "GbngUpdateMaint")?gbngUpdateId=' + data + '" class="detailsGbngUpdate">Details</a> | <a href="@Url.Action("DeleteGbngUpdate", "GbngUpdateMaint")?gbngUpdateId=' + data + '&publishedSwitchValue=' + row.PublishedSwitch + '&canBeSeenSwitch=' + row.CanBeSeenSwitch +'" class="deleteGbngUpdate">Delete</a>';
                        }
                    },
                    { "title": "Gbng Update Title", "data": "GbngUpdateTitle", "searchable": true },
                    { "title": "Published", "data": "PublishedSwitch", "searchable": true },
                    { "title": "Published Date", "data": "PublishedDateTime", "searchable": true },
                    { "title": "Alert Email Sent", "data": "AlertSentSwitch", "searchable": true },
                    { "title": "Can Be Seen", "data": "CanBeSeenSwitch", "searchable": true },
                ],
                "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            }
        }

        // Initialize the datatable.
        gbngUpdateListVM.init();
    });


    $('#gbngupdates-data-table').on("click", ".editGbngUpdate", function (event) {
        event.preventDefault();

        $('#successMessage').remove();
        $('#errorMessage').remove();

        // I can get the href element fine.
        var url = $(this).attr("href");

        // I want to get the publishedSwitch of this selected row. How?
        var publishedSwitch = ?????????;

        alert('publishedSwitch: ' + publishedSwitch); 

        $.get(url, function (data) {
            $('#deleteGbngUpdateContainer').html(data);

            $('#deleteGbngUpdateModal').modal('show');
        });
    });
    </script>
}

标签： jqueryasp.net-mvcdatatable

解决方案

在 clicked 事件函数中，我通过以下方式从点击的行中获取 PublishedSwitch 列值：

    //--------------------------------------------------------------------------------------------------------------------------------------------------
    // Get the row clicked - this gets a row of the columns.
    //
    // It looks like this:
    //       Edit|Details|Delete   Test of yesterday   true        12/07/2020 20:02:40   false              true
    //
    // It's column headings are (these are for reference only and not part of the data below):
    //       Action                Title               Published   Published Date        Alert Email Sent   Can Be Seen
    //--------------------------------------------------------------------------------------------------------------------------------------------------
    var clickedRow = $(this).closest('tr').find('td');

    // From the clicked row, go threw the columns and extract out the value for - 'publishedSwitch'. It's value will be equal to 'true'.
    // - 0 based.
    var publishedSwitch = $(clickedRow).eq(2).text();

推荐阅读