CODEWITHSUNDEEP
javascripthtmljquerydatatablesjquery-plugins
Jordan
Jordan

Reputation: 307

Jquery Data Table , Edit single column value and send the value to back end for update

I am working on Data table and I would like to change the cell Value and send it to back end. I am able to create data table with editable field. I am able to assign static value "new" as I provided in sample code. My question is how can I assign value Entered by User to the editable column "Name". I would like to display value entered by user and send all the values entered by user to back end to save in data base.

JsFiddle Link with Code Scenerio : JSFIDDLE

Html Code :

 <html>
<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>
<button onclick="saveDatatoBackEnd()">save</button>
<table id="example" class="display" width="100%"></table>
</body>

JavaScript :

var dataSet = [
    [ "1","Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
      [ "2","Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
 
function prepareEditableOrder(data, type, row, meta){
     return '<input class="form-control" id="'+row.Id+'" type="text"  value = ' + data + ' >';
} 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Id",},
            { title: "Name" ,render:prepareEditableOrder},
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
    
    $('#example').on( 'click', 'td', function () {
        // how to display value in datatable entered by user in column name and store it in data table so I can send it to back end 
        var table = $(this).closest('table').DataTable();
        table.cell(this).data("new"); // this is static value , I need value entered by user                        
    });
} );

function saveDatatoBackEnd(){
//Need to send change data to server side..... 
}

Thank you for your time Jordan

Upvotes: 1

Views: 5793

Answers (1)

Lam Tran Duc
Lam Tran Duc

Reputation: 638

When the save button is clicked, you want to get all input values in the data to save, right? You can try like this:

var dataSet = [
        ["1", "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
        ["2", "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
    ];

function prepareEditableOrder(data, type, row, meta) {
    return '<input class="form-control cell-datatable" id="' + row.Id + '" type="text"  value = ' + data + ' >';
}

$(document).ready(function () {
    $('#example').DataTable({
        data: dataSet,
        columns: [
            {title: "Id",},
            {title: "Name", render: prepareEditableOrder},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary"}
        ]
    });

    $('#example').on('click', 'td', function () {
        // how to add new value to cell and store it in data table so I can send it to back end
        var table = $(this).closest('table').DataTable();
        // table.cell(this).data("new"); // this is static value , I need value entered by user
    });
});

$('#btn-save').click(function () {
    let data = [];
    $.each($('input.cell-datatable'), function (index, value) {
        data.push($(value).val())
    })
    alert('Data to save: ' + data)
    saveDatatoBackEnd(data)
})

function saveDatatoBackEnd(data) {
    //Need to send change data to server side.....
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">



<button id="btn-save">save</button>
<table id="example" class="display"></table>

Upvotes: 1

Related Questions