jQWidgets Forums

Tagged: angularjs data table, datatable

This topic contains 2 replies, has 2 voices, and was last updated by tbrocker 9 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

MySQL / Json Query not displaying in grid Posts
February 9, 2016 at 12:41 am MySQL / Json Query not displaying in grid #81262

tbrocker
Participant

Hi,

I am in the process of creating an data grid, and can get the master grid to display but the data from the mysql query, converted into json, is not populating the grid. Listed below is the code. When I run data.php on its own it seems to retrun the proper data. Please see below.

HTML

<!DOCTYPE html>
<html ng-app=”demoApp” lang=”en”>
<head>
<title id=’Description’>Master Data 1 table</title>
<meta name=”description” content=”This sample demonstrates how we can implement Master-Details using 2 jqwidgets Grid instances.”>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/angular.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.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/jqxdatatable.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script><script type=”text/javascript” src=”jqwidgets/jqxangular.js”></script>
<script type=”text/javascript”>
var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
demoApp.controller(“demoController”, function ($scope) {
var employeesSource = {
dataFields: [
{ name: ‘EmployeeID’, type: ‘number’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
dataType: “json”,
url: “data.php”,
async: false,
autoBind: true,

};
var employeesDataAdapter = new $.jqx.dataAdapter(employeesSource, { autoBind: true });

$scope.mastergridSettings =
{
width: 850,
source: employeesSource,
pageable: true,
pageSize: 5,
created: function(args)
{
masterGrid = args.instance;
masterGrid.selectRow(0);
},
columns: [
{ text: ‘First Name’, dataField: ‘FirstName’, width: 250 },
{ text: ‘Last Name’, dataField: ‘LastName’, width: 250 },
{ text: ‘Title’, dataField: ‘Title’ },
{ text: ‘City’, dataField: ‘City’ }
]
};
});
</script>
</head>
<body ng-controller=”demoController”>
<h3>Employees</h3>
<jqx-data-table jqx-on-row-select=”masterGridRowSelect(event)” jqx-settings=”mastergridSettings”></jqx-data- table>
</body>
</html>

data.php

<?php
/* get data and store in a json array */
/* check connection */
include (‘connect.php’);
if (mysqli_connect_errno())
{
printf(“Connect failed: %s\n”, mysqli_connect_error());
exit();
}
// get data and store in a json array
$query = “SELECT EmployeeID, FirstName, LastName, Title, Address, City FROM employees”;
if (isset($_GET[‘insert’]))
{
// INSERT COMMAND
$query = “INSERT INTO employees(FirstName, LastName, Title,Address, City) VALUES (?,?,?,?,?,?,?)”;
$result = $mysqli->prepare($query);
$result->bind_param(‘sssssss’, $_GET[‘FirstName’], $_GET[‘LastName’],
$_GET[‘Title’], $_GET[‘Address’], $_GET[‘City’]);
$res = $result->execute() or trigger_error($result->error,
E_USER_ERROR);
// printf (“New Record has id %d.\n”, $mysqli->insert_id);
echo $res;
}
else if (isset($_GET[‘update’]))
{
// UPDATE COMMAND
$query = “UPDATE employees SET FirstName=?, LastName=?,Title=?, Address=?, City=? WHERE ‘EmployeeID`=?”;
$result = $mysqli->prepare($query);
$result->bind_param(‘sssssssi’, $_GET[‘FirstName’], $_GET[‘LastName’],
$_GET[‘Title’], $_GET[‘Address’], $_GET[‘City’], $_GET[‘EmployeeID’]);
$res = $result->execute() or trigger_error($result->error,
E_USER_ERROR);
// printf (“Updated Record has id %d.\n”, $_GET[‘EmployeeID’]);
echo $res;
}
else if (isset($_GET[‘delete’]))
{
// DELETE COMMAND
$query = “DELETE FROM employees WHERE EmployeeID=?”;
$result = $mysqli->prepare($query);
$result->bind_param(‘i’, $_GET[‘EmployeeID’]);
$res = $result->execute() or trigger_error($result->error,
E_USER_ERROR);
// printf (“Deleted Record has id %d.\n”, $_GET[‘EmployeeID’]);
echo $res;
}
else
{
// SELECT COMMAND
$query = “SELECT EmployeeID, FirstName, LastName, Title, Address, City FROM employees”;
$result = $mysqli->prepare($query);
$result->execute();
/* bind result variables */
$result->bind_result($EmployeeID, $FirstName, $LastName, $Title,
$Address, $City);
/* fetch values */
while ($result->fetch())
{
$employees[] = array(
‘EmployeeID’ => $EmployeeID,
‘FirstName’ => $FirstName,
‘LastName’ => $LastName,
‘Title’ => $Title,
‘Address’ => $Address,
‘City’ => $City
);
}
echo json_encode($employees);
}
$result->close();
?>

Any help is much appreciated.

Thanks,

February 9, 2016 at 9:21 am MySQL / Json Query not displaying in grid #81277

Peter Stoev
Keymaster

Hi tbrocker,

1. Check whether your server returns any data and whether the “URL” is correct.
2. Bind the widget to dataAdapter. You don’t do that in your code.
3. Remove autoBind: true. You don’t need that in this code. Otherwise, you will end up with 2 data binding calls.
4. Fix the syntax problems in your code. You have “,” after last items.
5. Check your browser’s console for errors.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 16, 2016 at 12:57 pm MySQL / Json Query not displaying in grid #81479

tbrocker
Participant

It worked, got it

Thanks much,
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.