Add Row to a Specific Table Location

krutovdl

Is it possible to add a new row at a specific location of a table using jQuery .after() function in order to avoid adding a new row at the end of a table?

kthorngren

Datatables won't know about the new row using jQuery .after(). Best practice is to use Datatables APIs to add the rows. Depending on what you are trying to achieve the Absolute Order plugin may do what you want. Or you can jump to the page the row was added using either the page.jumpToData() or row().show() plugins.

If these don't help please provide details of what you are trying to achieve.

Kevin

krutovdl

I am working on a simple maintenance page. The table is table is to be simple. Sorting, paging, or other Datatable options are disabled. The number of table rows will always be small. The maintenance function allows the user to update existing rows. Currently, the requirement is to add a new row below the row to update. Ones the edit is made, this row is removed and the modified row shows the updated data.

kthorngren

I would look at using the Child row details functionality. This example, using the return $('<tr>...</tr><tr>...</tr>').toArray(); technique from this thread shows how you can open the child row and display the same data below the clicked row. You can allow editing in this row then update the parent row, with row().data() when done.

Kevin

krutovdl

Thank you for that information. After looking at the example, is possible to change the input control to be a single button which creates the child row from the parent row, and 2 buttons in the child row one for submit and the other to remove the current child row?

kthorngren

Yes, its all customizable. The format function is used to display the child rows. The child row is independent of Datatables. You are in control of wha tis displayed and any inputs and event handlers.

The details-control control class is used, along with the shown class, to display the buttons. See the CSS tab of the example. You can use these buttons or your own. You don't need to use the details-control class. The row().child().show() and row().child().hide() APIs are used to show/hide the child details. You can invoke them how you like.

For example you can change the parent row button to be an edit button and when clicked use the part of the code, in the event handler, that shows the row. Then in the child details use the submit to update the parent row along with row().child().hide() to hide the child.

Back to your original question of using jQuery .after(). For the purposes you mentioned you can probably use something like that. Datatables won't know about the row but that is not your intention.

Kevin

kthorngren

I built a simple example to show what I'm talking about.
http://live.datatables.net/gupazase/114/edit

It has only one input. You can create any input type you need for any of the columns.

Kevin

krutovdl

Thank you, this concept works very well.