Problem reloading data from other source
Problem reloading data from other source
anzeljg
Posts: 2Questions: 0Answers: 0
I want to create filemanager-like structure to display data about folders and files form cloud storage service (e.g. Box.net or Dropbox).
I am successful in the first part - that is to pull the data from cloud service and display it in a table (with appropriate icons for folder and files, etc.).
My DataTables initialisation:
[code]
$(document).ready(function() {
var oTable = $('#fileList').dataTable( {
"asStripeClasses": [ 'r0', 'r1' ],
"bFilter": false,
"bSort": false,
"bInfo": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'folder.php?id={$id}',
"aaSorting": [[6,'desc']],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[6] == "folder") {
$(nRow).addClass('folder');
}
if (aData[6] == "file") {
$(nRow).addClass('file');
}
return nRow;
},
"aoColumnDefs": [
{ "aTargets": [ 0 ], "sClass": "filethumb" }, /* Icon column */
{ "aTargets": [ 1 ], "sClass": "filename" }, /* Name column */
{ "aTargets": [ 2 ], "sClass": "filedescription" }, /* Desc column */
{ "aTargets": [ 3 ], "sClass": "filesize" }, /* Size column */
{ "aTargets": [ 4 ], "sClass": "filedate" }, /* Date column */
{ "aTargets": [ 5 ], "sClass": "right s btns3" }, /* Btns column */
{ "aTargets": [ 6 ], "bVisible": false } /* Type column */
]
} );
} );
[/code]
My problem is, that the names of folders are html links, like:
[code]
row1: Folder 1
row2: My Folder
row3: New folder with long name
etc.
[/code]
and I would like, that when I click the link, the DataTable would refresh the aaData, that it gets from 'folder.php?id={$id}', where {$id} is the id of clicked html link.
How would I achieve this? Thanks for any answers, pointers, feedback...
By the way, I've already implemented the function, which returns new data, but I can't find the way to clear old data and replace it with the new data...
[code]
$('#fileList').on('click', 'a.changefolder', function (e) {
var id = $(this).attr('id');
var url = 'folder.php?id=' + id;
$.get(url, function(data){
alert("Data Loaded: " + data);
if (data.length) {
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
} );
//oTable.fnClearTable();
//oTable.fnDraw();
} );
[/code]
I am successful in the first part - that is to pull the data from cloud service and display it in a table (with appropriate icons for folder and files, etc.).
My DataTables initialisation:
[code]
$(document).ready(function() {
var oTable = $('#fileList').dataTable( {
"asStripeClasses": [ 'r0', 'r1' ],
"bFilter": false,
"bSort": false,
"bInfo": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'folder.php?id={$id}',
"aaSorting": [[6,'desc']],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[6] == "folder") {
$(nRow).addClass('folder');
}
if (aData[6] == "file") {
$(nRow).addClass('file');
}
return nRow;
},
"aoColumnDefs": [
{ "aTargets": [ 0 ], "sClass": "filethumb" }, /* Icon column */
{ "aTargets": [ 1 ], "sClass": "filename" }, /* Name column */
{ "aTargets": [ 2 ], "sClass": "filedescription" }, /* Desc column */
{ "aTargets": [ 3 ], "sClass": "filesize" }, /* Size column */
{ "aTargets": [ 4 ], "sClass": "filedate" }, /* Date column */
{ "aTargets": [ 5 ], "sClass": "right s btns3" }, /* Btns column */
{ "aTargets": [ 6 ], "bVisible": false } /* Type column */
]
} );
} );
[/code]
My problem is, that the names of folders are html links, like:
[code]
row1: Folder 1
row2: My Folder
row3: New folder with long name
etc.
[/code]
and I would like, that when I click the link, the DataTable would refresh the aaData, that it gets from 'folder.php?id={$id}', where {$id} is the id of clicked html link.
How would I achieve this? Thanks for any answers, pointers, feedback...
By the way, I've already implemented the function, which returns new data, but I can't find the way to clear old data and replace it with the new data...
[code]
$('#fileList').on('click', 'a.changefolder', function (e) {
var id = $(this).attr('id');
var url = 'folder.php?id=' + id;
$.get(url, function(data){
alert("Data Loaded: " + data);
if (data.length) {
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
} );
//oTable.fnClearTable();
//oTable.fnDraw();
} );
[/code]
This discussion has been closed.
Replies
http://datatables.net/forums/discussion/9489/update-datatables-when-button-is-clicked