Show hidden row data
Show hidden row data
Currently I have 2 tables, one DataTable with a list of players and a second standard table that these players can be added to. When the "+" button is selected, the row is hidden using .hide()
in the DataTable and the second is populated. When they are removed from the second table using "x", I need to show the original row in the DataTable once again. I thought this would be as simple as using .show()
on the row but for whatever reason it isn't working.
As this hide/show are in fact used in several DataTable examples on this site, I am trying to figure out what I am doing wrong. The #tbl_lineup
in the code below is the standard table they are being removed from and #tbl_players
is the DataTable where the row is hidden and I need to show it again. table.row( index ).data();
has the correct information so I know the row is correct, I just can't get it to display.
$('#tbl_lineup tbody').on( 'click', 'button', function()
{
// Get the Parent Table Row
var row = $(this).parents('tr');
// Get the Player's ID from the first (hidden) column
var player_id = row.find("td").eq(0).html();
// Get the Player's Salary and strip the dollar sign
var player_salary = row.find("td").eq(5).html();
player_salary = player_salary.replace("$", "");
// Update the Total Salary to remove this Player
var salary = parseInt($('#total_salary').html()) - parseInt(player_salary);
$('#total_salary').html(salary);
var count = 0;
// Empty all of the cells for this except the Position (Static)
row.find('td').each(function()
{
if (count != 1)
{
$(this).html('');
}
count++;
});
$('#tbl_players tr').filter(function()
{
var filterData = table.column(0).data().filter( function ( value, index )
{
if (value === player_id)
{
table.row( index ).show();
}
});
});
});
Answers
You have to check on the status of the child node first, to determine if you need to run show() or hide(). I see youre calling show() every time.. where is hide() called? Im on my cell, so maybe i missed it