Download file associated with row from server

majortom

I have a database that contains a link to a file in one of the columns. I would like to download the file when I have the row selected. Is there any way to do this? I was thinking about having a download button at the top (just like TableTools) so that when the user clicks it (and a row is selected) the associated file is downloaded.

Thanks for the help!

aaronw

Sure, just extend a text button with your own javascriot function: http://www.datatables.net/extras/tabletools/button_options specifically fnOnClick and then look at http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery

majortom

I just came across this example: http://www.datatables.net/examples/api/row_details.html

Is there a way to link to a file from the database this with? Here is my initialization code

[code]
$('#documents').dataTable({
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "scripts/documents.php",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "col1", "sClass": "center", "sWidth":"300px" },
{ "mData": "col2", "sClass": "center" },
{ "mData": "col3", "sClass": "center", "sWidth":"100px" },
{ "mData": "col4", "sClass": "center" }
],

"sDom": 'T<"clear">Rlfrtip',
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"aButtons": ["select_all", "select_none",
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [
{ "sExtends": "copy", "bSelectedOnly": true },
{ "sExtends": "csv", "bSelectedOnly": true },
{ "sExtends": "xls", "bSelectedOnly": true },
{ "sExtends": "pdf", "bSelectedOnly": true },
{ "sExtends": "print", "sButtonText": "Print View" }
]
}
]
}
});
[/code]

And here is the function that I took from the example page I link to

[code]
function fnFormatDetails ( oTable, nTr ) {
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'File Name:' + mData[3] +'';
sOut += 'Download PDF:Hello World!';
sOut += '';

return sOut;
}

$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#documents thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#documents tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('documents').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#documents tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "~/Images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "~/Images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]

All this does is create a new column on the left, and it shifted all the data one column over (So the col1 data is where the image should be, col2 is where col1 should be, etc.). There are no columns under the col4 thead, and none of the images are showing up

aaronw

I'm confused by what you're trying to accomplish. Do you want an separate action column on each row to do something, or do you want a button at the top that does different things on each rows? The example you found does neither. Keep in mind also, that you can use mRender to change the actual content of a cell, so if you have a filename in a cell, you can use mRender to change that into a link to download something.

majortom

Originally I was trying to add a button that would download the document, but I'm just trying to find the easiest way to download a file where the path to it is saved in a database. I thought maybe the example I found would be easier (and maybe look a little nicer). I thought maybe I could add a link to the hidden component of the table.

However, I looked at mRender, and it seems like it would be the easiest. Here is what I have now

[code]
$('#documents').dataTable({
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "scripts/documents.php",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "col1", "sClass": "center", "sWidth": "300px" },
{ "mData": "col2", "sClass": "center" },
{ "mData": "col3", "sClass": "center", "sWidth": "100px" },
{ "mData": "col4", "sClass": "center" },
{
"mData": "DirectoryPath",
"mRender": function (data, type, full) {
return 'Download';
}
}
],

"sDom": 'T<"clear">Rlfrtip',
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"aButtons": ["select_all", "select_none",
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [
{"sExtends": "copy", "bSelectedOnly": true },
{ "sExtends": "csv", "bSelectedOnly": true },
{ "sExtends": "xls", "bSelectedOnly": true },
{ "sExtends": "pdf", "bSelectedOnly": true },
{ "sExtends": "print", "sButtonText": "Print View" }
]
}
]
}
});
[/code]

It works! Thank you very much