DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Update datatable with select field

Update datatable with select field

yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
edited February 2017 in Free community support

I have a object like

function a(opts)
{
this.opts = opts;
}

in my editor I use it as

var test= new $.fn.dataTable.Editor( {
        table: "#test",
            idSrc:  'id',
        fields: [ {
                            label: "Test:",
                            name: "opts.id",
                            type: "select",
                            ipOpts: getData()
       }]
});

and the datatable display it as

var testTable = $('#test).DataTable({
        dom: "Bfrtip",
        data: [ getDataList() ],
        columns: [  { data: 'opts.label', title: "opts label" } ],
        select: true, 
        buttons: [
            { extend: "create", editor: test},
            { extend: "edit", editor: test},
            { extend: "remove", editor: test}
        ]
    });

when I edit the data, the display will become null, how can I replace opts.label as the select label and opts.id as select value?

Answers

  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin

    What is getData() returning? Can you show me that code please?

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
    edited February 2017 
    function getData() {
    var list = new Array();
    var url;

   $.post({
        url: url,
        async: false,
        type: 'POST',
        success: function (response) {                        
            for(var i = 0; i < response.length; i ++){
                list[i] = { "label": response[i].name, "value": response[i].id };
            }
        },
        error: function (err) {
            alert(err);
        }
    });

    return list;
}
  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin

    Ah - I see the issue. The problem is that you are using a local table editing, editing data which is set to the DataTable, but the extra information that is not in the edit cannot be read by the DataTable.

    Consider the Ajax join examples for Editor - there are two bits of information returned by the server for a joined field after an edit:

    • The label
    • The value

    You have only the value here since you are not making an Ajax request to the server to get the data for the joined fields.

    You would need to use postSubmit to add the label to the data that will be used to populate the record.

    Generally I would not recommend using local editing for joined data, because of exactly this issue.

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0

    If not using local editing, any other method to use ?

  • it-bi-bid@post.luit-bi-bid@post.lu Posts: 2Questions: 0Answers: 0

    Ok I reopen this one @allan .

    I'm in the same case. Local editing with joined data.
    I'm trying to update the table after edit the select field with postSubmit or postEdit
    but how can I get the label corresponding to the new value?

  • it-bi-bid@post.luit-bi-bid@post.lu Posts: 2Questions: 0Answers: 0
    edited December 2019

    I found this example http://live.datatables.net/layonado/2/edit

    Working fine, even with inline editing

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.