Breaking News: Grepper is joining You.com. Read the official announcement!

edit data in datatable

Add Answer

Graceful Gecko answered on March 18, 2021 Popularity 10/10 Helpfulness 1/10

answer edit data in datatable

related datatables update data

related datatables modify rows

related datatable edit row

edit data in datatable

Comment

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: editor.datatables.net

Tags: datatable edit whatever

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Graceful Gecko

0 Answers Avg Quality 2/10

Closely Related Answers

datatables update data

Comment

datatables update data dynamically

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: datatables d

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

Murtaza hasan

0 Answers Avg Quality 2/10

datatables modify rows

Comment

const table = $("#tableId").DataTable();

table.rows().every( function() {
	const node = this.node(); // html node -- tr
  	const row = $(node).find('td:eq(2)'); // 3rd (0-index) column -- td
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: datatables d

Link to this answer
Share Copy Link

Contributed on Mar 18 2021

Chris PA

0 Answers Avg Quality 2/10

datatable edit row

Comment

// Assume you have an HTML table with the id "myTable"
// Each row may have an "edit" button to initiate editing

$(document).ready(function() {
  // Bind click event to all "edit" buttons in the table
  $('#myTable').on('click', '.edit-row', function() {
    // Get reference to the current row
    var currentRow = $(this).closest('tr');

    // Extract values from the row cells, assuming each cell has a "data-*" attribute to identify the field
    var column1Value = currentRow.find('[data-column="column1"]').text();
    var column2Value = currentRow.find('[data-column="column2"]').text();
    // ... and so on for other columns

    // Example of opening a modal or a form for editing the data
    openEditForm(column1Value, column2Value);
  });

  // Function to handle opening/editing the row data
  function openEditForm(column1Value, column2Value) {
    // Your implementation here, which could be opening a modal or a form
    // with fields pre-populated with the row's data, allowing the user to edit it
    console.log('Edit form opened with column values:', column1Value, column2Value);
  }
});

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

edit data in datatable

Contents

More Related Answers

edit data in datatable

Closely Related Answers

datatables update data

datatables modify rows

datatable edit row

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.