How to pass the values of datatable row to spring mvc?

patreeeeek

$(document).ready(function () {

        $('#datatables').DataTable({
            "dom": '<"toolbar">frtip',
            "responsive": true,
            "scrollY": "550px",
            "scrollCollapse": true,
            "ajax": "smsSenders.json",
            "aoColumns": [
                {"mData": "sender"},
                {"mData": "content"},
                {"mData": "receiveTime"},
                {"mData": "messageId","visible":false},
                {"mData": "portId",
                    "fnCreatedCell": function (nTd) {
                        $(nTd).html("<i class='ti-pencil-alt btn btn-simple btn-edit btn-icon' data-target='#replyModal' data-toggle='modal' data-mode='edit'></i>\n\n\
                        <i class='ti-comment-alt btn btn-simple btn-reply btn-icon' data-target='#replyMod' data-toggle='modal' data-mode='reply'></i>\
                     ");
                    }
                }
            ],
            language: {
                "search": "_INPUT_",
                searchPlaceholder: "Search records"
            }

        });

This is how I create my datatable.

is there any way to pass the values of the row where the button si clicked?

I am using spring mvc, orcale db running in tomcat.

patreeeeek

        $('#datatables tbody').on( 'click', 'btn-edit', function () {
                    var data = table.row( this ).data();
                    $.ajax({
                           url:'/getConversationList',
                           data: {
                              sender: data[sender];
                              smsc: data[sender];
                           },
                           error: function() {

                           },
                           success: function(data) {

                           },
                           type: 'POST'
                        });
                    });

Is this how you do it? I'm not really sure

kthorngren

I think you are close. Since your selector is a button and not a row this will be the button. You might need to change:

var data = table.row( this ).data();

to:

    var row = $(this).closest('tr');
    var data = table.row( row ).data();

The variable row should end up being the row the button is on by using jQuery's closest() method. Then use the row variable is the parameter used to get the row's data.

You could use some console.log() statements to see what's going on, for example:

    console.log(this);
    var row = $(this).closest('tr');
    console.log(row);
    var data = table.row( row ).data();
    console.log(data);

The syntax of this is incorrect:

                   data: {
                      sender: data[sender];
                      smsc: data[sender];
                   },

The ; should be commas:

                   data: {
                      sender: data[sender],
                      smsc: data[sender],
                   },

HTH,

Kevin

patreeeeek

Hey Kevin,

Thanks for the answer.

How about if I pass it through link?

   "    responsive": true,
                    "scrollY": "550px",
                    "scrollCollapse": true,
                    "ajax": "smsSenders.json",
                    "aoColumns": [
                        {"mData": "sender"},
                        {"mData": "content"},
                        {"mData": "receiveTime"},
                        {"mData": "messageId","visible":false},
                        {"mData": "portId",
                            "fnCreatedCell": function (nTd) {
                                $(nTd).html("<a href='${pageContext.request.contextPath}/dashboard?sender="{"mData":"sender"};"'><i class='ti-pencil-alt btn btn-simple btn-edit btn-icon' data-target='#replyModal' data-toggle='modal' data-mode='edit'></i>\n\n\
                                <i class='ti-comment-alt btn btn-simple btn-reply btn-icon' data-target='#replyMod' data-toggle='modal' data-mode='reply'></i>\
                             ");
                            }
                        }
                    ],

I think this part of the code is wrong
${pageContext.request.contextPath}/dashboard?sender="{"mData":"sender"};