What is the Best Strategy to render this kind of table?

tupacmo

Hey,

To help with my question, please use this image of what my table looks like right now when I am using tablesorter/tablepager plugin, http://i.imgur.com/yBFP4.jpg. Currently, I have 30000 links to load and eventually a lot more but I believe datatables can handle that, if not please let me know.

I believe the best way to go about this is a server side script to access mysql database which is all well and I have no trouble there. However, my table has unique features, as you can see from the image, my table has an extra column called "action" containing three buttons/images. The first button is a "bar graph" which when clicked links to a different url. The second button is a "tools" button that when clicked opens up a detailed row that contains information such as "Title, Website, and Adtype". The third button is the "delete" button which when clicked, deletes the link from the table and the mysql database.

I am having trouble incorporating this last column using Datatables. The problem is that the "Title, Website, and Adtype" are all different columns in a mysql database. I looked over the example from http://datatables.net/release-datatables/examples/api/row_details.html, however, this is not for server-side scripts. So how would I go about calling data using server-side script.

I have no idea on on how to go about my problem. Any help would be greatly appreciated.
Thanks for your time.

fbas

for delete: have your delete image/link trigger ajax call to a special delete script on the server, then redraw the table (maybe use the plug-in function fnStandingRedraw to keep current page)

for icons, you can use the fnRender function to convert any column into arbitrary html.

to get your icons and the delete functionality to work, you should keep the database primary key in one of your columns (you can hide the column if you want, while still being able to access it for the fnRender function or other data access functions in the DataTables API)

If you need more specifics, just ask. I have some older posts on these topics, probably with code snippets.

tupacmo

Hi fbas,

thanks for your comment, the fnRender is a nifty function of the plugin. But I am still not sure of how to call data when using server side script. I can call the column data and then hide the column, but how would i specifically call data?

for example

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

what would I change aData[1] to, because this format is only valid when using aaData format? a specific code would be great if you have the time.

Thanks
tupacmo

allan

I'd suggest what you do in this case is add:

[code]
console.dir( aData );
[/code]

after the line "var aData = oTable.fnGetData( nTr );" in your above code, and then look at the Firebug / Inspector console and see what format your data is in and where the data you want is. It is no way for us to know without seeing your page / code what that would be - but just look at the console and that will tell you :-)

Allan