Creating a table with ajax
Creating a table with ajax
grimmstede
Posts: 8Questions: 0Answers: 0
Here is my problem I am having with datatables. I am new to this so please bear with me. I have a left div navigation page and a right side div that shows content based on what the user picks on the navigation side.
the nav link runs a ajax called php file that reads my mysql database and shows the results in a datatable.
The initial load works fine and when I click a link I want the current datatable results wiped out except for headers and then the rows replaced with all new data. Pretty simple really but the ajax call is really bothering me.
if someone could walk me through this with non table data or show me an example, I would greatly appreciate it.
my example is at http://www.feemon.com/mindmon/filemon.php
the nav link runs a ajax called php file that reads my mysql database and shows the results in a datatable.
The initial load works fine and when I click a link I want the current datatable results wiped out except for headers and then the rows replaced with all new data. Pretty simple really but the ajax call is really bothering me.
if someone could walk me through this with non table data or show me an example, I would greatly appreciate it.
my example is at http://www.feemon.com/mindmon/filemon.php
This discussion has been closed.
Replies
The example linked to is using Table Sorter, so I'm not 100% sure how the data is getting into the table. However, basically what you will need to do depends on how you are getting the data into DataTables:
1. Using sAjaxSource ( http://datatables.net/examples/data_sources/ajax.html ) - make use of the fnReloadAjax plug-in: http://datatables.net/plug-ins/api#fnReloadAjax
2. Using a JSON or HTML source - make use of the API methods fnClearTable and fnAddData ( http://datatables.net/api ) to clear out any old data and then add the new data that you want for the table to be displayed.
Allan
Here is the initialization in table.php:
[code]
$(document).ready(function() {
$('#files').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
} );
} );
[/code]
here is server_processing.php:
[code]
<?php
/* MySQL connection */
$gaSql['user'] = "*****";
$gaSql['password'] = "*****";
$gaSql['db'] = "******";
$gaSql['server'] = "localhost";
$gaSql['type'] = "mysql";
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/* Paging */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/* Ordering */
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i
[/code]
I need help with calling a function where I could pass the table name (in the example above, it is test1) and reload the table with the new data. Your help would be greatly appreciated.
Thanks for the code - the answer is slightly different since you are using server-side processing, than what it would be for client-side. Probably all you need to do is to pass in a custom parameter for the table: http://datatables.net/examples/server_side/custom_vars.html . That way when you redraw the table ( http://datatables.net/api#fnDraw ) the server will be asked for the required table and give back that information for the display.
You might also need to restart the display start point, which can be done with this plug-in API function: http://datatables.net/plug-ins/api#fnDisplayStart .
Regards,
Allan
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "DataTables\ example_files/demo_pag.css";
@import "DataTables\ example_files/demo_tab.css";
$(document).ready(function() {
$('#files').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
} );
} );
Live example
File Name
File Type
File Size
Loading data from server
File Name
File Type
File Size
table test2
table test3
[/code]
I get part you said about adding data to the initialization, I am getting confused about how I connect the links at the bottom of the page to the server_processing.php.
Thanks so much for putting up with me.
What you need to do is pass something to the server-side processing script to indicate what table it should use. Something like this:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php"",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "table", "value": "TABLE_SOMETHING" } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
} );
} );
[/code]
So you need to change 'TABLE_SOMETHING' to either a variable or a function call which will get the table you want to have $_GET['table'] set to, and then the rest of it should just work :-)
Allan
http://www.feemon.com/mindmon/table/table2.php
I have only one remaining problem. The First column which is the filename I want to be a link in this format:
http://www.feemon.com/mindmon/table/download.php?name=14.pdf&parent=test1
I would also like to format the size column as well.
How do I format the data to be a link?
Allan