jquery - 在 jquery datatable 中将一行数据从一个表传输到另一个表显示 [object Object]

Question

我使用图像映射器来映射人体图像。当我单击其器官名称的一部分时，将其作为参数发送到网络服务。代码:

[WebMethod]
    public void GetSymptoms(String organ_name)
    {
        List<symps> listSymptoms = new List<symps>();

        string CS = ConfigurationManager.ConnectionStrings["EhealtsCS"].ConnectionString;
        using (SqlConnection con = new SqlConnection(CS))
        {
            SqlCommand cmd = new SqlCommand("sendSymptoms", con);
            cmd.CommandType = CommandType.StoredProcedure ;

            SqlParameter parameter = new SqlParameter();
            parameter.ParameterName = "@organ";
            parameter.Value = organ_name;
            cmd.Parameters.Add(parameter);

            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                symps symp = new symps();
                symp.Sympt = rdr["SymptomsName"].ToString();
                listSymptoms.Add(symp);

            }

            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(listSymptoms));
        }

它返回症状名称作为我使用数据表绑定(bind)的特定器官的 json 数据。现在我想将此表的行值传输到另一个表。 代码:

$('#manLeg').mapster($.extend({}, options,{

    onClick: function (e) {

        if (e.key === 'toes')
        {
            $.ajax({
                url: "SympsService.asmx/GetSymptoms",
                data: { organ_name: "toes" },
                method: "post",
                dataType: "json",
                success: function (data) {
                    $('#symptomsTable').DataTable({
                        destroy: true, paging: false, searching: false, info: false, data: data,
                        columns: [
                            {
                                'data': 'Sympt',
                                'title': 'Shin Symptoms',
                                class: 'center'
                            },
                        {
                            "targets": [-1],
                            'data': null,
                            render: function () {
                                return "<button type='button'>Choise</button>"
                            }
                        }
                        ]

                    });
                    $("#symptomsTable button").on("click", function (evt) {

                        var table1 = $("#symptomsTable").DataTable();
                        var table2 = $("#choiseTable").DataTable();
                        var tr = $(this).closest("tr");
                        var row = table1.row(tr);
                        var data = JSON.parse(JSON.stringify(row.data()));
                        row.remove().draw();
                        table2.row.add(data).draw();
                    });

                    $("#choiseTable").DataTable({
                        destroy: true, paging: false, searching: false, info: false,
                        columns: [
                           {
                               data:null,
                               'title': 'Selected Symptoms'
                           }
                        ]
                    });

                },

当我单击选择按钮时，一行被删除，并在第二个表中创建新行，但该值无法传递。在新行中，它显示每行的 [object Object]。 请任何人告诉我我的代码有什么问题。任何类型的帮助将不胜感激。

Answer 1

我使用了单击按钮来“移动”该行，但这可以让我明白这一点。 我创建了一个 jsFiddle，它使用行按钮来移动单行。它还使用表格按钮来移动多个选择行 https://jsfiddle.net/bindrid/sc0bo122/6/

        $("#example button").on("click", function (evt) {

            var tr = $(this).closest("tr");
            var row = table1.row(tr);

            // instead of getting the row, I get the row data.
            // the json stuff is done just to make a copy of the data
            // to ensure it is disconnected from the source.
            var data = JSON.parse(JSON.stringify(row.data()));

            // this actually destroys the row so you can't add it to the other table.
            row.remove().draw();

            // then add and draw.
            table2.row.add(data).draw();

        })