Jquery 数据 Table , 编辑单列值并将值发送到后端进行更新

Question

我正在处理数据 table，我想更改单元格值并将其发送到后端。我可以使用 editable 字段创建数据 table。正如我在示例代码中提供的那样，我能够分配静态值“new”。我的问题是如何将用户输入的值分配给 editable 列“名称”。我想显示用户输入的值并将用户输入的所有值发送到后端以保存在数据库中。

JsFiddle Link 代码场景：JSFIDDLE

Html代码：

 <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", "0,800" ],
      [ "2","Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",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..... 
}

感谢您的宝贵时间乔丹

Answer 1

当点击保存按钮时，你想获取数据中的所有输入值进行保存，对吧？你可以这样尝试：

var dataSet = [
        ["1", "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "0,800"],
        ["2", "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", ",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>

Jquery 数据 Table , 编辑单列值并将值发送到后端进行更新

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

javascript

html

jquery

datatables

jquery-plugins