CODEWITHSUNDEEP
jquerydatatables
MiguelV
MiguelV

Reputation: 27

Send the row values of a Jquery Datatable to a new form

I have a working script that retreives data into a table. I want to add an edit link, so that when I click on Edit, it gets to a page where I can modify data to update the DB.

The working script is the following:

<script>
$(document).ready(function() {
    $('#tabla').DataTable({
        scrollY:        '40vh',
        scrollCollapse: true,
        paging:         true,
    ajax:{
    method: "POST",
    url: "/ServletList",
    dataSrc: "datos"
    },
    "serverSide": true,
    "processing": true,
    "columns": [
        {"data": "id","searchable":false},
        {"data": "name","searchable":true},
        {"data": "city","searchable":true},
        {"data": "country","searchable":true},
    ]   
    });
    });
</script>

And I have added the following lines to the columns section:

{"mRender": function ( data, type, row ) {
    return '<a href=edit.jsp?id='+row.id+'>Edit</a>';}
}

edit.jsp is a form that will update a value of the DB once it is filled.

My question is how do I pass to the edit.jsp the values that I have selected in the row: id, name, city, country

Upvotes: 0

Views: 1141

Answers (1)

Ahmed Moayad AlMoghrabi
Ahmed Moayad AlMoghrabi

Reputation: 1277

I think you can do this several ways, but the one came to my mind is this:

  • The edit link will trigger on click a function
  • This function will fetch all row fields (related to clicked link row)
  • Get the values of those fields and shape them like url string
  • Redirect to edit.jsp page and read the URL which contains values

Code to do so:

{"mRender": function ( data, type, row ) {
    return '<a href="javascript:;" data-url="edit.jsp?id='+row.id+'" onclick="EditRowData(this);">Edit</a>';}
}

and the EditRowData function code is:

<script>
    function EditRowData(element) {
        urlToEditPage = $(element).attr('data-url');
        firstValue = $(element).parents('tr').find('.firstInput').val();
        secondValue = $(element).parents('tr').find('.secondInput').val();
        //... add values as you want
        window.location.href = urlToEditPage + '&firstValue=' + firstValue + '&secondValue=' + secondValue
    }
</script>

Upvotes: 1

Related Questions