HTML Required for MySQL database
HTML Required for MySQL database
Hi,
What is the correct HTML required on my webpage page for DataTables to work with a MySQL database? I cannot see in the extensive documentation, under Server-side (MySQL); what the main HTML tags/structure on my webpage should be? Here's what I have so far, but the (MySQL sourced) DataTable is not appearing on my webpage?
HTML page:
[code]
Show Pet Name Database
Column 1
Column 2
etc
Row 1 Data 1
Row 1 Data 2
etc
Row 2 Data 1
Row 2 Data 2
etc
[/code]
Javascript file:
[code] // PHP MySQL Page: Show Petname Result Table
$(document).ready(function() {
$("#retrievepetnamebtn").click(function() {
$("#retrievepetname").hide();
$('#petnametable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'getpetnamefromdb.php'
} );
})
} ); [/code]
PHP File: (note this file 'getpetnamefromdb.php' is located in the sam dir as index.html)
[code] <?php
/* This Script Gets PetName from MySQL DB, for DataTable use */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'id', 'petname' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "table1";
/* Database connection information */
$gaSql['user'] = "root";
$gaSql['password'] = "notshown";
$gaSql['db'] = "jasontaylorwebsite2";
$gaSql['server'] = "localhost";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/ [/code]
( The rest of this php file has been deliberately omitted)
Thank you, in advance for your help.
What is the correct HTML required on my webpage page for DataTables to work with a MySQL database? I cannot see in the extensive documentation, under Server-side (MySQL); what the main HTML tags/structure on my webpage should be? Here's what I have so far, but the (MySQL sourced) DataTable is not appearing on my webpage?
HTML page:
[code]
Show Pet Name Database
Column 1
Column 2
etc
Row 1 Data 1
Row 1 Data 2
etc
Row 2 Data 1
Row 2 Data 2
etc
[/code]
Javascript file:
[code] // PHP MySQL Page: Show Petname Result Table
$(document).ready(function() {
$("#retrievepetnamebtn").click(function() {
$("#retrievepetname").hide();
$('#petnametable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'getpetnamefromdb.php'
} );
})
} ); [/code]
PHP File: (note this file 'getpetnamefromdb.php' is located in the sam dir as index.html)
[code] <?php
/* This Script Gets PetName from MySQL DB, for DataTable use */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'id', 'petname' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "table1";
/* Database connection information */
$gaSql['user'] = "root";
$gaSql['password'] = "notshown";
$gaSql['db'] = "jasontaylorwebsite2";
$gaSql['server'] = "localhost";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/ [/code]
( The rest of this php file has been deliberately omitted)
Thank you, in advance for your help.
This discussion has been closed.
Replies
I have some more information about the problem...
Firebug XHR does not show any activity (Get) ?
Also, I have updated my page HTML to include only: id and petname, together with two corresponding
Thanks.
This is a snippet from what I use.
[code]
oTable = $("#Remittance").dataTable( {
"sDom": "<'row'<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6 'p>>",
"sPaginationType": "bootstrap",
"bSort": false,
"bInfo": true,
"bProcessing": false,
"bAutoWidth": true,
"bServerSide": true,
"bRetrieve": true,
"bDeferRender": true,
"aaSorting": [[ 0, "desc" ]],
// Script location
"sAjaxSource": "../includes/getRemittance.php",
"sServerMethod": "POST",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
// Your data should be passed here
aoData.push( { "name": "remitStatus", "value": remitStatus } );
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (data) {
// Processing message
$('#Remittance').removeClass('hide invisible');
$('#processing').removeClass('alert alert-info').addClass('hide invisible');
fnCallback(data);
},
statusCode: {
200: function(data) {
if (data['iTotalDisplayRecords'] == 0 ) {
$('#processing').removeClass('alert alert-info').addClass('hide invisible');
}
}
}
} );
}
});
[/code]
Yours should be on the same lines.
NOTE: The number of columns in your HTML (inclusive of hidden ones) should match with those being returned from the server side script.
Hope this helps
Allan
Thanks for your time and your help, I am most grateful.
http://www.jttestwebsite.co.uk/job/php_web.html
Enter some test data into the above page. Then, when the retrieve name data button appears, click it...that's when I need the dataTable to appear showing the two columns "id" and "petname" populated by the MySQL database.
Thanks.
> TypeError: 'undefined' is not a function (evaluating '$('#petnametable').dataTable')
No easy way of putting this, but you haven't included DataTables on that page :-)
Allan