使用 MVC 将多个值传递到服务器端 Datatable Jquery 中的按钮答案

【问题标题】：Passing more than one value into a button in the server side Datatable Jquery using MVC使用 MVC 将多个值传递到服务器端 Datatable Jquery 中的按钮
【发布时间】：2018-08-22 11:58:44
【问题描述】：

我正在尝试将 MessageId 和 MobileNumber 的值作为参数传递给 Delete 按钮。目前，当我运行下面的 javascript 代码时，只显示 MessageId 的值（我不知道如何添加 MobileNumber 的值）。请帮忙

 var schedulemessageListVM;
    $(function () {
        schedulemessageListVM = {
            dt: null,
            init: function () {
                dt = $('#schedulemessage-data-table').DataTable({
                    "dom": '<"top"if>rt<"bottom"lp><"clear">',
                    "pageLength": 10,
                    "serverSide": true,
                    "processing": true,
                    "order": [[0, "desc"]],
                    "ajax": {
                        "url": "/MessageReport/LoadData2",
                        "type": "POST",
                        "datatype": "json"
                    },

                    "columns": [
                     {

                        "targets": [0],
                            "data": "MessageId",  "autoWidth": true,
                            "render": function (data, type, full)
                            {
                             // Pass the value of MessageId and  MobileNumber into the button
                                var a = '@Html.ActionLink("Delete", "Delete", "MessageReport", new { id = "MessageId" }, new { @class = "btn btn-xs btn-danger" })'.replace("MessageId", data);

                                return a;                                    
                            },
                        },
                        { "title": "Message Id", "data": "MessageId", "name": "MessageId", "autoWidth": true }
                        { "title": "Mobile Number", "data": "MobileNumber", "name": "MobileNumber", "autoWidth": true }
                   ]
                });
            }                 
        } 
        // initialize the datatables 
        schedulemessageListVM.init();

    });

【问题讨论】：

标签： javascript asp.net-mvc datatables

【解决方案1】：

在我同事的帮助下找到了问题的解决方案。发帖以帮助将来遇到相同问题的人

     "render": function (data,  type, full)
       {
           {
              return '<a class="btn btn-danger" href="/MessageReport/Delete?MessageId='+full.MessageId+'&MobileNumber='+full.MobileNumber+'">Delete </a>';
           }

      }

【讨论】：

感谢您的回答，它帮助了我:)

【解决方案2】：

您可以使用下面的方法，在单击按钮之前不需要传递任何复杂的数据：

首先为按钮创建一行并添加一个DeleteBtn 类，以便稍后将其用作选择器。我不需要更多关于它的信息。

"columns":[{
            "data": "Delete",
            "defaultContent": '<button class="btn btn-danger DeleteBtn">Delete</button>',
            "title": "Delete"
        }, ...

现在定义单击按钮时要执行的事件并将data 对象传递给函数：

    $("#myTable").on("click", ".DeleteBtn", function () {
 myDeleteFunction($("#myTable").DataTable().row($(this).parents("tr")).data()) });

现在传递的数据包含您可能需要的所有信息，可以像这样使用：

    fucntion myDeleteFunction(data){
 alert(data.MessageId);
 alert(data.MobileNumber);
 }

或该行所需的任何其他数据。

如果您不熟悉$("#myTable").DataTable().row($(this).parents("tr")).data()) 概念：

$("#myTable").DataTable() 定义将使用与 DataTables 相关的方法。

.row()用于选择表格的一行，需要一个选择器。

this.parents("tr") 选择包含单击的删除按钮的表格行。

.data() 会将所选行的数据作为对象返回。

【讨论】：