Inserting a row for inline editing in an unsorted table and rows.addClass() with paging.

Karl53

DataTable 1.10.5 and Editor v1.4. Inline editing and data source is JavaScript.

I understand that there is no API method to insert a row. That normally one would add a row and it is immediately sorted to the location in the table according to the sort order. However, my table has ordering is set to false and my interface requires the ability for the user to be able to insert a row between existing rows.

Therefore, I tried to simulate this behavior:

1) I see at least 2 method to reload data from an Ajax source (ajax.reload() and ajax.url()). Is there any method to reload data from an JavaScript data source?

The way I wanted approach a simulated insert into DataTable was to programmatically insert an object into my JavaScript array of objects and then reload the JavaScript data with the new row, invalidate() and then draw(). Not finding a reload method, I just called rows.invalidate().draw() but that did not cause DataTable to update the display with the newly inserted JavaScript object.

My understanding is that invalidate() is called if the JS source is changed and invalidate() works if I edit an existing object, but when a new object is inserted into the array, invalidate() does not work for me.

2) The other approach I used is to, after inserting the object into the JS array, is to call clear() followed by rows.add([JS Datasource]).draw(). This worked to the extent the new row is displayed in the DataTable. However, inline editing stops working completely. No editor opens when the onclick event fires. Is this the expected behavior? Or do I have a bug? Or is my approach completely invalid?

My code looks like this:

                        insertRow(1);    // inserts an object into the array at parameter location.
                        table.clear();
                        table.rows.add(inputs.data).draw().nodes().to$().addClass('MY_ROW');

The reason for showing the code is I actually have a question / comment about addClass().

3) The 3rd line above is also how initialize DataTable when the page loads. With paging: true and sufficient data to create multiple pages, the MY_ROW class is applied to the first page only. That is when the user goes to subsequent pages, the rows are not styled.

Is this expected? Where in the code or how would I apply the row style to subsequent pages.

Thanks.

Karl53

Before driving someone crazy, I have approach #2 working with :

table.rows().remove();
table.rows.add(inputs.data).draw().nodes().to$().addClass('MY_ROW');

The reason why the inline editors were not opening was due to the value of the data being inserted. It was silently failing a validation check.

None-the-less, is there a reload() method for JavaScript data, or should I follow this remove() and rows().add() approach?

And for my own understanding, why can't I use invalidate() and draw() when inserting a new object into the JavaScript array assigned to DataTable.data?

allan

is there a reload() method for JavaScript data

Not really - you would use clear() and rows.add(). There isn't a reload method for non-Ajax tables since the data source could be anything, and DataTables doesn't have control over it.

However, my table has ordering is set to false and my interface requires the ability for the user to be able to insert a row between existing rows.

The best way to do that is to enable ordering (disable it for the columns so the user can't order the table) and then insert the new row with the data that will position it in the required place. Otherwise next time the table is redrawn, the row's position would be lost - unless you took the brute force approach for removing all rows and then adding them in the order you want.

And for my own understanding, why can't I use invalidate() and draw() when inserting a new object into the JavaScript array assigned to DataTable.data?

That isn't really what invalid is designed to do. It is designed so that existing data will be invalidated and thus reread. It does not look for new or removed data - the API must be used for that.

I am going to write a blog post about using Object.observe and Array.observe in future that is along those lines and you might be interested in.

Allan