finding the last row of a table and adding a row right above it.

finding the last row of a table and adding a row right above it.

monkeytoothmonkeytooth Posts: 22Questions: 0Answers: 0
edited January 2013 in General
I have found some discussions here on this forum and else where that are similar in concept, but do not 100% fit my need, and the ones that have, there is not much to go on as far as how to tackle the issue. So with that, what I have is a table that is rendered in PHP of which has 7 distinct rows that need to stay in there spot and the order they are rendered in. Needless to say sorting is turned off for this particular table. So of these 7 rows I have a requirement that when a user goes to add data to the table we want it to display on the fly, without reload or anything like that, theres also a jquery post that occurs to save the data but thats a mute point at the moment. Generally though just for the sake of saying the initial 7 rows are laid out via PHP any new or additional rows from a data set would come from an AJAX call. In either event would be same logic, that anything appended to the table must be before the last row. Actually in the log run theres some need for some of the data set to eventually be added before/after certain other "static" rows as well, but for now I am worried mostly about that last row.

Anyway all of that in the open. I found one post of allens that reference fnGetData, and fnSort, and a means of using a hidden column to apply sorting and ensuring that it always occurs, using the hidden column for an index of sorts. But it didn't really give an example of how allen would do it, it more so than less gave a text based direction to follow, from which I failed. I did manage to muster something together that would work in concept, but it manipulates the dom, and not datatables directly. So the sorting didn't apply that example is..

[code]
$last = $('.static:last > td:first');
var currLast = parseInt($last.text());
var newLast = currLast+1;
$last.text(newLast);
oTable.fnAddData([currLast, '', 'C:\\foo', 'E R D']);
oTable.fnSort([0,'asc'])
[/code]

this as I said, worked, updated the columns expected, but in it, lies a problem, when I rehide the the column that is for sorting jquery doesnt get the right values to work with which I understand why that happens, but also even with the column showing when it got the right values it would just append to the table after the row I wanted.

So I have been searching for a better part of the morning for answers and methods to do as I want but I am getting no where so I figured I'd try my luck here and hopefully get some help from some more seasoned users of datatables

for reference my table settings are:

[code]
var oTable = $('#manager_table').dataTable({
"sPaginationType": "full_numbers",
"bPaginate": false,
"bFilter": false,
"bAutoWidth": true,
"sScrollY": "300px",
"bScrollCollapse": true,
"aaSortingFixed": [[0,'asc']],
"oLanguage": {
"sInfo": 'Tasks: _END_',
"sEmptyTable": "No Job/Task Sources to display currently.",
"sInfoEmpty": "No Job/Task(s)."
},
"aoColumns": [
{ "bSortable": true, "bVisible": false},
{ "bSortable": false, "sWidth":"5%", "sClass":"center"},
{ "bSortable": false, "sWidth":"85%"},
{ "bSortable": false, "sWidth":"10%"},
]
});
[/code]

Replies

  • monkeytoothmonkeytooth Posts: 22Questions: 0Answers: 0
    Update. I have since come up with two variations neither work well per say except maybe on the first run of it. If I trigger it more times then it errors and or just fails completely.

    [code]function newTaskData()
    {
    var lastTR = taskmanagerTable.fnGetData($('.static:last').get(0));
    var currLast = parseInt(lastTR[0]);
    var newLast = parseInt(lastTR[0])+1;
    alert([newLast, currLast])
    taskmanagerTable.fnUpdate([currLast, 'checkbox', 'data source '+newLast, 'E R D'], 1);
    taskmanagerTable.fnUpdate(newLast, currLast, 0);
    }
    [/code]
    Yields:
    [quote]TypeError: a.aoData[b] is undefined[/quote]

    where as
    [code]function newTaskData()
    {
    var lastTR = taskmanagerTable.fnGetData($('.static:last').get(0));
    var currLast = parseInt(lastTR[0]);
    var newLast = parseInt(lastTR[0])+1;
    alert([newLast, currLast])
    taskmanagerTable.fnUpdate(newLast, currLast, 0);
    taskmanagerTable.fnAddData([currLast, 'checkbox', 'data source', 'E R D']);
    }[/code]

    produces an event that will keep appending, however. After the first run it just keeps appending the same numbers for the index column. Example lets say first run things are 0-4 for the index it will take the new row and give it a 5 and update the existing row to a 6. But if I trigger it again, it will give do a 6 and a seven, but it turns the last row which got 5 into a 6 and then appends a new row with 7 as well. and leaves the row that initially got a 6 alone.

    Any ideas or suggestions as to how to fix it, I currently feel like I have an answer on the tip of my tounge but it just doesnt want to make it to my hands...
  • monkeytoothmonkeytooth Posts: 22Questions: 0Answers: 0
    Well alright, I was finally able to achieve the goal I was hoping to achieve. I am now able to add a new row before the last one. The solution ultimately turned out to be, that I needed to physically remove the last row, then re-add it after the new row I wanted to add to begin with. So I had to retain the row data from the one being deleted so I used fnGetData on the last row saved it as a variable, deleted the row, then added the new row, and then added the original row after that, apply a quick sort just to ensure everything is in its place as expected, and presto working like a charm. My end result which could be and will be improved on at this point is..

    [code]
    function newTaskData()
    {
    lastTR = taskmanagerTable.fnGetData($('#manager_table tbody tr:last').get(0));
    taskmanagerTable.fnDeleteRow(taskmanagerTable.fnGetPosition($('#manager_table tbody tr:last').get(0)));
    taskmanagerTable.fnSort([[0,'asc']]);
    }
    [/code]
This discussion has been closed.