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

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"  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  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

CodePudding user response：

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  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" ></table>