How to set position after add row [ fnAddData() ] ?
How to set position after add row [ fnAddData() ] ?
jqquestion001
Posts: 4Questions: 0Answers: 0
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 );
});
}
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 );
});
}
This discussion has been closed.
Replies
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
.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 );
}
...............
.....
$( "#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 );
}
});
..........