How to set position after add row [ fnAddData() ] ?

jqquestion001

After I clicked add I can't delete new row. How to set position ?
Please see script below.

Thank you.




test






Column1
column2
column3
column4















$(function() {
startTest();
});

function startTest() {

var arrTest = [
["1one", "1two", "1three", "1four"],
["6one", "6two", "6three", "6four"]
];

var oTable = $("#products").dataTable({
"aaData": arrTest,
"bProcessing": true,
"bDeferRender": true,
"bFilter": false,
"bJQueryUI": true,
"sPaginationType": "two_button",
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"bRetrieve": false,
"bPaginate": true,
"bSort": false,
"aaSorting": [[0, "asc"]],
"iDisplayLength": 10
});

var iPosition;

$("#products tbody").click(function(event) {

$(oTable.fnSettings().aoData).each(function ()
{
$(this.nTr).removeClass('selected');
});

$(event.target.parentNode).addClass('selected');

});


$( "#products tbody tr" ).click(function() {

iPosition = oTable.fnGetPosition( this );

alert( "iPosition=" + iPosition );

if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
else
{
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}

});

$( "#btnRemove").click( function(){

if ( iPosition > -1 )
{
if ( confirm( "Delete '" + arrTest[iPosition] + "' ?" ) == true )
{
oTable.fnDeleteRow( iPosition );
}
}
else
{
alert( "Not Selected " + iPosition );
}
});

$( "#btnAdd").click( function(){

oTable.fnAddData([ ".1", ".2",".3",".4" ]);
var rows = $('#products tbody tr').length;
//alert( "rows" + rows );

});
}

allan

The position is entirely determined by the sort that is applied to the table. If you need it to go into a particular place, it must go there in the sort that the table applies.

Allan

jqquestion001

Hi Allan

I'm new for dataTable. Could you please specify more details.
I try push data to array 'arrTest' and redraw, but no position.

$( "#btnAdd").click( function(){

oTable.fnClearTable();
arrTest.push([ "1", "2","3","4" ]);

oTable.fnAddData(arrTest,false);
oTable.fnDraw(false);
});

Thank you

allan

I don't really understand I'm afraid. What do you mean by "no position"? As I said, position in the table is controlled entirely by the sorting that is applied to the table.

jqquestion001

Thank you Allan, I found solution.


.selected, .selected > td {
background-color:#CF0 !important;
}


...............





test






Column1
column2
column3
column4
















var rIndex = -1;
var iPosition = -1;

$(function() {
startTest();
});

function startTest() {

var arrTest = [
["1one", "1two", "1three", "1four"],
["6one", "6two", "6three", "6four"]
];

var oTable = $("#products").dataTable({
"aaData": arrTest,
"bProcessing": true,
"bDeferRender": true,
"bFilter": false,
"bJQueryUI": true,
"sPaginationType": "two_button",
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"bRetrieve": true,
"bPaginate": true,
"bSort": true,
"aaSorting": [[0, "asc"]],
"iDisplayLength": 10
});

setRowFunction();

$("#products tbody").click(function(event) {

$(oTable.fnSettings().aoData).each(function ()
{
$(this.nTr).removeClass('selected');
});

$(event.target.parentNode).addClass('selected');

});

$( "#btnRemove").click( function(){

if ( iPosition > -1 )
{
if ( confirm( "Delete '" + arrTest[iPosition] + "' ?" ) == true )
{
oTable.fnDeleteRow( iPosition );
}
}
else
{
alert( "Not Selected " + iPosition );
}
});

$( "#btnAdd").click( function(){

oTable.fnClearTable();
arrTest.push([ ".1", ".2",".3",".4" ]);
oTable.fnAddData(arrTest,false);
oTable.fnDraw(false);

setRowFunction();
});
}

function setRowFunction( ) {

var rows = document.getElementById('products').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

for ( var i = 0; i < rows.length; i++)
{
rows[i].onclick = function() { setRowIndex(this.rowIndex);}
}
}

function setRowIndex( indx ) {
rIndex = indx;
iPosition = rIndex - 1;
//alert( "rIndex=" + rIndex + "iPosition=" + iPosition );
}





...............

jqquestion001

Sorry , when click to delete
.....

$( "#btnRemove").click( function(){

if ( iPosition > -1 )
{
if ( confirm( "Delete '" + arrTest[iPosition] + "' ?" ) == true )
{
arrTest.splice(iPosition,1);
oTable.fnDeleteRow( iPosition );
rIndex = -1;

setRowFunction();
}
}
else
{
alert( "Not Selected " + iPosition );
}
});
..........