Marco Gasi
asked on
Adding a hidden div to each row in a table
Hi everybody.
I have a table built through DataTables plugin and I need to attach to each row a div in order to get an effect similar to the one you have in mobile gmail app.
More precisely, I want that when user long presses on a row, the hidden div becomes visible hiding the row and occupyig the exact same space: in the hidden div I have the button to deete that row.
This is the code to build the table:
this produces this markup:
Here the css for the div:
How can I fix this?
Thank you for your help
I have a table built through DataTables plugin and I need to attach to each row a div in order to get an effect similar to the one you have in mobile gmail app.
More precisely, I want that when user long presses on a row, the hidden div becomes visible hiding the row and occupyig the exact same space: in the hidden div I have the button to deete that row.
This is the code to build the table:
function fillTable() {
loaderText('Loading...');
loader.fadeIn();
setTimeout(function () {
if ($.fn.dataTable.isDataTable('#grid')) {
t = jQuery('#grid').DataTable();
} else {
t = jQuery('#grid').DataTable({
"initComplete": function () {
var api = this.api();
if (!(api).data().count()) {
jQuery('#grid thead tr th').addClass('not-arrow');
} else {
jQuery('#grid thead tr th').removeClass('not-arrow');
}
},
"ajax": {
"url": baseurl + "data.php?user_id=" + user_id
},
"initComplete": function () {
// HERE I ADD THE DIV
$('#grid tbody tr').each(function(){
$(this).append('<div class="td-buttons" >Delete</div>');
});
},
aoColumns: [
{
"mData": 0,
"mRender": function (data, type, full) {
return '<div class="user"><a class="avatar" href="#"><span><img class="img-circle" src="' + baseurl + full[0] + '" alt=""></a></span><span class="username"><a href="#">' + full[2] + ' ' + full[1] + '</a></span></div>';
}
},
{
"mData": 1,
"mRender": function (data, type, full) {
return full[4];
}
},
{
"mData": 2,
"mRender": function (data, type, full) {
var dt = full[5].split(' ');
return dt[0] + ' at ' + dt[1];
}
}
]
});
}
// Here I manage the long press using hammer.js
$('#grid').hammer({domEvents: true}).on('press', 'tr', function () {
var user_id = $(this).find('div.user').data('id');
console.log('pressing row ' + user_id);
console.log('PRESSS DOWN');
});
jQuery('#grid_filter label').html(jQuery('#grid_filter label').find('input'));
jQuery('#grid_filter label input').attr('placeholder', 'Search').css({
'color': '#969BAA',
'font-size': '15px'
});
jQuery('#grid_filter label input').on('keyup change', function () {
t.search(this.value).draw();
});
loader.fadeOut();
}, 500);
}
this produces this markup:
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<div class="user" data-id="764">
<a class="avatar" href="#">
<span>
<img class="img-circle" src="avatar.gif" alt="">
</span>
</a>
<span class="username">
<a href="#">asdg test7</a>
</span>
</div>
</td>
<td>test</td>
<td>2016-10-06 at 13:10:40</td>
<div class="td-buttons">Delete</div>
</tr>
...
</tbody>
Here the css for the div:
.td-buttons{
position: absolute;
width: 100%;
left:0;
background: #ccc;
z-index: 3;
}
The only problem I get is that I can't set the div height in pixels because rows can have different heights depending on content and setting it to 100% it make it fill the page not the rowHow can I fix this?
Thank you for your help
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
In the next example you could get some ideas for some of your needs, it contains long-press event emulation (long press on row) and swipe (if supported) in http://jsfiddle.net/drL8b5g1/4/
The "swipe" event could be used only in mobile views if you add the jQuery Mobile plugin, does not work in desktop.
You can easily find some additional examples to get it fully working starting of this point .
The "swipe" event could be used only in mobile views if you add the jQuery Mobile plugin, does not work in desktop.
You can easily find some additional examples to get it fully working starting of this point .
ASKER
Thank you: with a slight modification to your code I get something closer to what I want: https://jsfiddle.net/marqusG/e8c573fu/3/
ASKER
Thank you
ASKER
I accepted you answer before to see your last comment. I'm goin to check it right now. Thank you again :)
ASKER
You example looks good , but it doesn't fit my need. That way I can't emulate gmail mobile app behavior. In gmail you can swipe left a row to delete an email: when you swipe left a colored space is left instead of the row for some seconds then it is deleted.
Well, I dont know swipe here but press, but I need to hide the row replacing it with an element whose wdth and height be equivalent to the row ones and within this elemet I'll put a button for now, but later I'll have to put other things.
So I'm wondering how I can achieve this...