Rendering DataTable from MySQL Database with php through JSON
Question
I am trying to render a DataTable on a webpage through JSON with php getting the data from a MySQL Database. But I am not getting it anyhow.. I get the JSON-File printed out (echo), but the DataTable is not rendered, and when opening the page I get an error: "....DataTable #xxxxx - Invalid JSON response..." But the JSON is right, I tested it with many JSON Validators. I Think it's just not formatted the way a DataTable should accept it.
Here is my JSON format, that get's printed out (echo), to test what I am becoming from the server:
{
"aaData":[
[
"id12345",
"bchange122",
"textHEre",
"https://url.here.com/images/ppp.png!",
"hellooooo",
"https://kbkbkbk.hello.com/subid=[usr.nr]-[b_tt]|[ba_ba]|[category]"
],
[
"id23456",
"test122",
"test2HEre",
"https://url.here.com/images/ppp.png!",
"huhuhu",
"https://kbkbkbk.hello.com/subid=[usr.nr]-[b_tt]|[ba_ba]|[category]"
],
[
"id34567",
"test233",
"test344HEre",
"https://url.here.com/images/ppp.png!",
"ohlll",
"https://kbkbkbk.hello.com/subid=[usr.nr]-[b_tt]|[ba_ba]|[category]"
],
[
"id45678",
"test344",
"test4555Here",
"https://url.here.com/images/ppp.png!",
"eholl",
"https://kbkbkbk.hello.com/subid=[usr.nr]-[b_tt]|[ba_ba]|[category]"
]
]
}
It is generated from this php:
<?php
/* 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( 'pId', 'sName', 'lName', 'pLogUrl', 'incent', 'det_sUrl');
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "tableName_here";
/* Database connection information */
$gaSql['user'] = "userHere";
$gaSql['password'] = "passHere";
$gaSql['db'] = "dataBaseHEre";
$gaSql['server'] = "serverHere";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$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'] ) && $_GET['iDisplayLength'] != '-1' )
{
$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<intval( $_GET['iSortingCols'] ) ; $i++ )
{
if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}
/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
$sWhere = "";
if ( $_GET['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
}
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable
$sWhere
$sOrder
$sLimit
";
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
/* Data set length after filtering */
$sQuery = "
SELECT FOUND_ROWS()
";
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
/* Total data set length */
$sQuery = "
SELECT COUNT(".$sIndexColumn.")
FROM $sTable
";
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
/*
* Output
*/
$output = array(
"aaData" => array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( $aColumns[$i] == "version" )
{
/* Special output formatting for 'version' column */
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}
$output = str_replace("\\/", "/", $output);
echo json_encode($output, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
?>
Here the Javascript-Code to render the DataTable from the JSON:
$(document).ready(function() {
$('#oShopPTable').DataTable( {
"bProcessing": true,
"bServerSide": true,
"ajax": "AdminPage.php",
"columns": [
{ "data": "pId" },
{ "data": "sName" },
{ "data": "lName" },
{ "data": "pLogUrl",
render : function( data, type, full, meta ) {
return type == 'display' ? '<img src="'+ data + '"/>' : data
}
},
{ "data": "incent" },
{ "data": "detsUrl",
render : function(data, type, full, meta) {
return type == 'display' ? '<a href="' + data + '">Go Shop</a>' : data
}
}
]
} );
} );
And here the HTML:
<div class="panel-body">
<table id="oShopPTable" class="display">
<thead>
<tr>
<th>P ID</th>
<th>S Name</th>
<th>L Name</th>
<th>P Log URL</th>
<th>Incentiv</th>
<th>Det S URL</th>
</tr>
</thead>
<tfoot>
<tr>
<th>P ID</th>
<th>S Name</th>
<th>L Name</th>
<th>P Log URL</th>
<th>Incentiv</th>
<th>Det S URL</th>
</tr>
</tfoot>
</table>
</div>
Since the echo of the output is coming on the page, the data get fetched from the database, and transformed to json, but not getting rendered as DataTable :-/ The form of the json is valid, but as I said, I think it's not the from the DataTable needs it. How can I turn it to that form in my code?
This javascript-code, which renders a DataTable from a JSON-file on the server (not getting the data from MySql-Server), works fine. It is another DataTable rendered on the same page:
$(document).ready(function() {
$('#oShopMobTable').DataTable( {
"ajax": "test.json",
"columns": [
{ "data": "pId" },
{ "data": "sName" },
{ "data": "lName" },
{ "data": "pLogUrl",
render : function( data, type, full, meta ) {
return type == 'display' ? '<img src="'+ data + '"/>' : data
}
},
{ "data": "incentiv" },
{ "data": "details.jToUrl",
render : function(data, type, full, meta) {
return type == 'display' ? '<a href="' + data + '">Go Shop</a>' : data
}
}
]
} );
} );
And the working table, is getting the data from the following test.json with this format:
{
"data": [
{
"sName": "hew",
"lName": "hewii",
"pId": "id21343123",
"pLogUrl": "https://image.xxxx.com/yyy.png",
"incentiv": "3p1",
"details": {
"tUrl": "https://url.here.com/",
"desc": "textHere11",
"juToSUrl": "http://surl.com/",
"juToSBut": "shop"
}
},
{
"sName": "weh",
"lName": "wehii",
"pId": "id56569653",
"pLogUrl": "https://image.xxxx.com/yyy.png",
"incentiv": "3p221",
"details": {
"tUrl": "https://url.here.com/",
"desc": "textHere11",
"juToSUrl": "http://surl.com/",
"juToSBut": "shop"
}
}
]
}
And the html is exactly the same as above (of course just the id is not the same), for the one getting the data from mysql (with php)
1 answers
solution1
0 2016-06-15 09:31:32
我认为此链接可以为您提供帮助=）： https : //editor.datatables.net/examples/advanced/REST.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Rendering DataTable rows from json file
rendering DataTable from Json, and modifying one of the columns
Return JSON in php from mySql Database
DataTable not accepting json from database
Issues Rendering Highcharts - Populating through PHP/MySQL
Error saving data from Datatable to MySQL database
json response from php to select2 not rendering
Populate a DataTable with MySQL Database
Form Input Not Passing Through PHP to mySQL Database
Storage of Json data to mysql database using php
Related Tags