jQuery UI Widgets › Forums › Grid › PHP Grid from MYSql
Tagged: data grid, data table, jqwidgets grid, jqxgrid
This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.
-
AuthorPHP Grid from MYSql Posts
-
I am attempting to populate a grid with mysql information on a PHP page and am currently using the example:Bind jQuery Grid to MySql Database using PHP.
I have 3 separate components to assembling this grid:( The example has 4 but I have combined the connect phase of the database with the data retrieval phase).
The 3 phases are:
1) Connect and retrieval of database info in PHP data.php: This works fine and outputs the information as an echo statement in an json_encode statement.2) Setup the grid info in JQuery. This is done with data fields and column Names and goes hand in hand with the database file. This is setup is the head of the main html file.
3) Output the datagrid as a div tag recognized by the jqwigets library: Easy enough. Just output “
” in the body of the main html file.
So, I have all three components working with the key component being the data retrieval process.
I have two seperate problems with this process that I need an answer for if anyone can help me?My first probelm is my grid shows up and I get the number of rows I would expect, but the rows are empty. So the number of rows I am expecting to get are there, it’s just that I am seeing a bunch of empty boxes for the grid. I ran the data.php from the command line and the output from this file is in the json_encode correct format that I was expecting. If for some reason the data is in the wrong format I noticed that you get the message ‘No data to Display’, which isn’t very helpful.
Secondly, I wondered if there is a way to pass information to the data.php file as either $_POST or $_GET so you can set the where clause of the query statement to something more specific.
Any help anyone can provide would be greatly appreciated.
Thanks much,
Scott
Hi Scott,
1. How do you initialize the Grid? Would you post a sample code? In addition, please take a look at the Online PHP samples if you did not.
2. Passing information is demonstrated in this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm
3. To use POST instead of GET, set the source object’s “type” field to “POST”. By default it is “GET”.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
Thank you for your response Peter!
It occurred to me that I probably didn’t provide enough information in my prior post but I didn’t want to overload the post in case someone was familiar with the problem.Here is the code to go along with the steps:
1) data.php
data.php:
$row[‘buyer_id’],
‘Response Date’ => $row[‘response_date’],
‘Response’ => $row[‘response’]
);
}
echo json_encode($responses);2)Your request: initializing the Grid.
$(document).ready(function()
{
// prepare the data
var source ={
datatype: “json”,
datafields: [{ name: ‘buyer_id’ },{ name: ‘response_date’ },{ name: ‘response’ },],
url: ‘data.php’
};$(“#jqxgrid”).jqxGrid({
source: source,
theme: ‘classic’,
columns: [{ text: ‘Buyer ID’, datafield: ‘buyer_id’, width: 100 },{ text: ‘Reponse Date’, datafield: ‘response_date’, width: 150 },{ text: ‘Response’, datafield: ‘response’, width: 500 }]
});
});3)Data output:
$output .= “
“;
To be output later: print $output;Like I mentioned in my prior post, I don’t have any problems seeing the grid, it’s just that I get blank data.
When I run data.php from the command_line here is the output of the json_encode() function and it is exactly what I expect to see:
[{“Buyer ID”:”23″,”Response Date”:”2013-05-17″,”Response”:”Accepted”},{“Buyer ID”:”23″,”Response Date”:”2013-05-17″,”Response”:”Failed: Invalid SID”}]Thanks for any help you can provide!
Scott
For some reason its not printing my output variable so I’m trying it in here:
$output .= “
“;
Hmmm… Ok well..not sure why it refuses print. How about this $output .= ” “;
I guess you’ll just have to take my word for it that it is the div tag for the jqxgrid object and it is printing. Sorry for all the extra posts.
Hi scott,
As far as I can see, there is an issue with the initialization of the “source” object. The “datafields” array has items that point to data field names which seem to be not included in your data source. Example: Your data has item “Buyer ID”, but in the source object you set it to “buyer_id”.
Please, find below a working sample based on your code:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from JSON data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/testdata.txt"; // prepare the data var source ={ datatype: "json", datafields: [{ name: 'Buyer ID' }, { name: 'Response Date' }, { name: 'Response' }], url: url }; $("#jqxgrid").jqxGrid({ source: source, theme: "classic", columns: [{ text: 'Buyer ID', datafield: 'Buyer ID', width: 100 }, { text: 'Reponse Date', datafield: 'Response Date', width: 150 }, { text: 'Response', datafield: 'Response', width: 500 }] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Ah. Ok. I see how the initialization of the source object goes hand in hand with the data.php file array initialization. What I ended up doing was to change the data.php file so that array initialization had the same name on both sides of the initialization. So the effect was the same.
$responses[] = array( 'action' => $row['action'], 'response_date' => $row['response_date'], 'response' => htmlspecialchars($row['response']) );
After I did this it started to show results. But, it’s nice to understand how the grid functions which you have definitely made clear in your example.
I have another question for you though and this ones an easy one.
Is there a way to limit the size of the grid when using the autorowheight: true and autoheight: true. I want to set the height to like 500, but that doesn’t do anything when I have these other two options set. Is there something similar to a maxheight available. I looked but don’t see it in the API. For now I’m using pageable: true to limit how high the grid can grow.
I also wanted to compliment you on a most excellent product. I have tried all the libraries and I mean “ALL” the libraries that are available to buy or for free and yours is by far the most developer friendly I have found. I would also like to comment on the excellent customer service I have recieved. I’m just a trial user now but you have definitely earned yourself a paying customer. I will be happily purchasing within the next couple of days and glad to be on board with you guys! See you around the boards.
Hi scott,
When autoheight is turned on, the Grid will create as many UI Rows as the Data Source has. The height of the Grid will be equal to the sum of the height of all loaded rows. Unfortunately, “maxheight” feature is not available. A possible solution for your scenario would be to possibly use it in Paging mode so the Height in that case will depend on the Grid’s Page Size selected in the Pager.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.