Editor updating incorrect line

rtingle

Hello,
I am trying to let utility clients update route and sequence numbers in a table for meter readings. I am using inline editing. When the client selects a line, enters the updated information and tabs, Editor is not getting the correct index of the line. Therefore it is updating the wrong record. An example is they type a value in the search, but it always updates the first row in the datatable. This is especially bad when they use the search function since they have hundreds of records. Below is the code I am using to select the index and update the row. If anyone could help me I would appreciate it. I cannot provide a link to the page as it is a secure site and the datatable is populated via Ajax call to the database.

    editor = new $.fn.dataTable.Editor
                    ({
                        table: "#RouteSequenceOrderTable",
                        idSrc: "PIDN",
                        search: 'false',
                        fields:
                        [
                            {
                                label: "Route:",
                                name: "Route"
                            },
                            {
                                label: "Sequence:",
                                name: "Sequence"
                            }
                        ],
                    });

                    var cell;

                    // Activate an inline edit on click of a table cell
                    $('#RouteSequenceOrderTable').on('click', 'tbody td', function (e)
                    {
                        cell = this;

                        editor.inline(table.cell(this).index(), {
                            onBlur: 'submit'
                        });
                    });

 editor.on('preSubmit', function (e, data, action)
                    {
                        var index   = table.cell(cell).index().row;
                        var row = table.row(index, { order: 'index' }).data();
                        
                        // Create a deep copy of row
                        var newRow = JSON.parse(JSON.stringify(row));

                        // Get key
                        var keys = Object.keys(data.data);
                        var secondSetOfKeys = Object.keys(data.data[keys[0]]);

                        // Use key to set data in row object 
                        switch (secondSetOfKeys[0])
                        {
                            case "Route":
                                newRow.Route       = data.data[keys[0]].Route;
                                break;
                            case "Sequence":
                                newRow.Sequence    = data.data[keys[0]].Sequence;
                                break;
                            default:
                        }

 var table = $("#RouteSequenceOrderTable").DataTable
                    ({
                        data: data,
                        responsive: true,
                        destroy: true,
                        paging: false,
                        dom: 'Bfrtip',
                        "columnDefs":
                        [
                            { "orderData": [0, 1]},
                   
                        ],
                        "order": [[0, 'asc'], [1, 'asc']],
                        keys:
                        {
                            columns: [0,1],
                            keys: [9],
                            editor: editor,
                            editOnFocus: true

                        },
                        buttons:
                        [
                                {
                                    extend: 'excelHtml5',
                                    title: 'Route And Sequence'
                                },
                           
                        ],
                        columns:
                        [

                            { data: 'Route' },
                            { data: 'Sequence', type: "num"  },
                            { data: 'Address' },
                            { data: 'City' },
                            { data: 'State' },
                            { data: 'Zip' },
                            { data: 'PropertyStatus' },
                            { data: 'PIDN' },
                            { data: 'OwnerName' },
                            { data: 'Service' },
                            { data: 'Cycle' },
                            { data: 'SerialNumber' },
                            { data: 'ServiceStatus' }

                        ],

                    })

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

A few thoughts:

• Is PIDN unique?
• Add rowId: 'PIDN' to your DataTables iniitisliation
• There is a syntax error in the code there - the closing }); is missing from the preSubmit event handler. Is that just a copy / paste error?

I'm not seeing much else wrong there. Can you give me a link to a page showing the issue? Or perhaps show me the data you are populating the table with (even just a few rows should do).

Allan

rtingle

Thank you for your response Allan,

Sorry about the copy and paste error with the missing )}; .

The PIDN is unique. I thought I added that as the unique Identifier for the editor.
idSrc: "PIDN"

I am not sure if I can give you a link because the page is secured with a login. Can I send you a CSV with the data I am populating the table with?

allan

Yes, you should also add it to the DataTables initialisation as rowId.

I'm not sure a CSV would help to be honest - it is a coding issue rather than a data one. Can you create a test account for me and PM me the details perhaps?

Allan

rtingle

I am working on a way to get you access to see the issue. Is there anyway I could do a screen share?