ColReorder Loses Textbox Values

matthttam

Link to test case: https://jsfiddle.net/matthttam/5087mhzo/2/
Debugger code (debug.datatables.net): https://debug.datatables.net/owojaz
Error messages shown: No errors
Description of problem: When using ColReorder, if a textbox exists it will lose its value after being moved. This seems to be because bootstrap only stores the value of a textbox in the javascript and not directly in the dom. However, the first row seems to maintain its data and I don't know why.

In the example, Click Add Rows until you have a few. type data in for a few of the rows. Reorder the columns.

kthorngren

Thanks for the test case You need to inform Datatables of the change. Use cell().data() for this. Here is your updated example:
https://jsfiddle.net/qoyserdg/

See the input change event at the bottom of the Javascript.

It simply updates the cell with the input value. If you want to keep the cell as an input you can update the cell with the desired HTML.

Kevin

matthttam

Thanks for the response however that isn't really working either.
1) I need to keep the input boxes
2) Even in your example, moving the cells causes the values to be changed.
It seems to repeat the bottom input box value for all but the first row.

After adjusting it to set the HTML input value attribute and set the cell data to the outerHTML property the input boxes stay but the values are messed up in the same way upon moving them.

$('#MultiAddTable').on('change', 'tbody input', function () {
        var val = $(this);
        val.attr('value', $(this).val())
        var table = $('#MultiAddTable').DataTable();
        var cell = this.closest('td');
        
        table.cell(cell).data( val.prop('outerHTML') ).draw();
        })

matthttam

Side note. I am using the same name as it is copying the row data from the first row of the DataTable. I though maybe them having the same name could be causing a problem. So, I added this code directly after

var row = dt.$('tr').last()

row.find(':input').each(function(){
                        $(this).attr('name', ($(this).attr('name') + '_' + Math.floor((Math.random() * 100) + 1)))
                    })

This made all the names unique and it made no difference.

colin

Can you update your test case please to demonstrate that,

Colin

kthorngren

I need to keep the input boxes

Like i said my example is just placing the value using cell().data(). You can change it to what you want, like the HTML for the input.

Even in your example, moving the cells causes the values to be changed.
It seems to repeat the bottom input box value for all but the first row.

There is something in the way you are adding the new row which I didn't debug. When I was testing I copied the row first and updated the second row. Then moved the columns. I can add a third row, update the third row and it keeps the values.

As Colin said if you need further help please update the test case to show the issues.

Kevin

matthttam

Sorry about that. Here is the updated code.
https://jsfiddle.net/matthttam/5087mhzo/5/

Steps to reproduce:
Add 3 addition rows by clicking the Add Rows button 3 times
In the "Last login by" column enter 1,2,3,4 going down the list.
In the "IP Address" column enter a,b,c,d going down the list.
Click and drag "Last login by" to swap with "IP Address"

The result is:
"IP Address" has a,d,d,d
"Last login by" has 1,4,4,4

The expected result is:
"IP Address" has a,b,c,d
"Last login by" has 1,2,3,4

matthttam

OK... I fixed it. If someone can tell me why this worked that would be good.
https://jsfiddle.net/matthttam/5087mhzo/7/

I'm thinking it has something to do with object referencing but I'm not as familiar with that in JS. using slice() cloned the array object and it worked.

Maybe that is what it was... if rows 2,3,4,5 etc... were all the same javascript object in memory than the last value that was set by ColReorder would set all of them before redrawing the table. Let me know if that is right. I like to learn :-)

Thanks again for the help though! It is much appreciated.