jQuery UI Widgets › Forums › DataTable › bind the DataTable to a remote data source
This topic contains 6 replies, has 2 voices, and was last updated by Mircea Giurgiu 10 years, 12 months ago.
-
Author
-
Hi,
I tried to edit a table using jqxDataTable .
This table is bind to a remote data base(Mysql)
After I edit a row and I select another row , the previous row is set with 0 for each column.
If I use another source is working.
The code is bellow:
Can someone help me?
M Giurgiu<!DOCTYPE html>
<html lang=”en”>
<head><link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.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/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’},
{ name: ‘itemDesc’},
{ name: ‘parent’}
],
url: ‘data/menu_data.php’,}
var dataAdapter = new $.jqx.dataAdapter(source);// initialize jqxDataTable
$(“#dataTable”).jqxDataTable(
{
width: 685,
source: dataAdapter,
pageable: true,
pagerButtonsCount: 10,
editable: true,
autoRowHeight: false,columns: [
{ text: ‘Menu ID’, editable: false, dataField: ‘id’,cellsAlign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘Description’, dataField: ‘itemDesc’, cellsFormat: ‘f’, cellsAlign: ‘left’, align: ‘left’, width: 300},
{ text: ‘Parent’, dataField: ‘parent’,cellsAlign: ‘left’, align: ‘left’, width: 100 },]
});});
</script>
</head>
<body class=’default’>
<div id=”dataTable”></div>
</body>
</html>menu_data.php
<?
#Include the connect.php file
include(‘../connection.php’);// get data and store in a json array
$query = “SELECT * FROM Menu”;
$from = 0;
$to = 30;
$query .= ” LIMIT “.$from.”,”.$to;
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$roles[] = array(
‘id’ => $row[‘idMenu’],
‘itemDesc’ => $row[‘itemDesc’],
‘parent’ => $row[‘parent’]
);
}
echo json_encode($roles);
?>Hi mgiurgiu,
The “type” setting during the datafields array initialization is missing. Please, set it to the appropriate values – “number”, “string”, “date” or “bool”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comI made the correction , but it is still not working.
I note that is working with another data.
Mircea
the code
<!DOCTYPE html>
<html lang=”en”>
<head><link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.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/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ , type:’number’},
{ name: ‘itemDesc’, type:’string’},
{ name: ‘parent’, type:’number’}
],
url: ‘data/menu_data.php’,}
var dataAdapter = new $.jqx.dataAdapter(source);// initialize jqxDataTable
$(“#dataTable”).jqxDataTable(
{
width: 685,
source: dataAdapter,
pageable: true,
pagerButtonsCount: 10,
editable: true,
autoRowHeight: false,columns: [
{ text: ‘Menu ID’, editable: false, dataField: ‘id’,cellsAlign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘Description’, dataField: ‘itemDesc’, cellsFormat: ‘f’, cellsAlign: ‘left’, align: ‘left’, width: 300},
{ text: ‘Parent’, dataField: ‘parent’,cellsAlign: ‘left’, align: ‘left’, width: 100 },]
});});
</script>
</head>
<body class=’default’>
<div id=”dataTable”></div>
</body>
</html>Hi mgiurgiu,
If you send us the data that you try to load, we would be able to test, too.
Looking forward to your reply.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comYou load this and you see what is happening
gimoinvest.com/eurosense/dataTable.html
<?php
session_start();
ob_start();
error_reporting(E_ALL);// Informatii baza de date
$host = “localhost”;
$user = “gimoinve_admin”;
$passw = “admin1234”;
$database = “gimoinve_eurosense”;$conn = mysql_connect($host,$user,$passw) or die(mysql_error());
mysql_select_db($database, $conn) or die(mysql_error());function addentities($data){
if(trim($data) != ”){
$data = htmlentities($data, ENT_QUOTES);
return str_replace(‘\\’, ‘\’, $data);
} else return $data;
} // End addentities() ————–?>
Hi mgiurgiu,
The problem is that your String Column – Production is with Wrong cellsFormat setting which is for Number Column. Remove it and it will work.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMany thanks
It is working
Mircea -
AuthorPosts
You must be logged in to reply to this topic.