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

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

jqquestion001jqquestion001 Posts: 4Questions: 0Answers: 0
edited January 2014 in DataTables 1.9
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 );

});
}

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    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
  • jqquestion001jqquestion001 Posts: 4Questions: 0Answers: 0
    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
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    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.
  • jqquestion001jqquestion001 Posts: 4Questions: 0Answers: 0
    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 );
    }





    ...............
  • jqquestion001jqquestion001 Posts: 4Questions: 0Answers: 0
    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 );
    }
    });
    ..........
This discussion has been closed.