jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by stvhui 11 years, 8 months ago.

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

October 16, 2013 at 2:27 am Master Detail Grid #30785

stvhui

Participant

Hello to you,

I’m newbie in javascript and php world

I’m in learning to using JQWidgets

From example of Master Details Grid Version 3.0.3, I just changing to using my own database and table

the result is at : http://web.gmigloria.org/md
(please take a look)

The problems is :
The grid is not displayed all the data, means if preparing for 10 rows, the grid just displaying only 5 or 6 rows (very strange)

I also setting for ordering for relationno, but seems not works

How to sending my code to you in attachment ?

My code is :
data.php

<?php

#Include the connect.php file

include('connect.php');

#Connect to the database

//connection String

$connect = mysql_connect($hostname, $username, $password)

or die('Could not connect: ' . mysql_error());

//Select The database

$bool = mysql_select_db($database, $connect);

if ($bool === False){

	print "can't find $database";

// get data and store in a json array

$query = "SELECT * FROM tblmember1 order by relationno";

if (isset($_GET['relationno']))

	$pagenum = $_GET['pagenum'];

	$pagesize = $_GET['pagesize'];

	$start = $pagenum * $pagesize;

	$query = "SELECT SQL_CALC_FOUND_ROWS * FROM tblmember1 WHERE relationno='" .$_GET['relationno'] . "'";

	$query .= " LIMIT $start, $pagesize";

	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

	$sql = "SELECT FOUND_ROWS() AS `found_rows`;";

	$rows = mysql_query($sql);

	$rows = mysql_fetch_assoc($rows);

	$total_rows = $rows['found_rows'];

	// get data and store in a json array

	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

		$orders[] = array(

			'relationno' => $row['relationno'],

			'memberno' => $row['memberno'],

			'membername' => $row['membername'],

			'address' => $row['address']

);

    $data[] = array(

       'TotalRows' => $total_rows,

	   'Rows' => $orders

);

	echo json_encode($data);

else

	$pagenum = $_GET['pagenum'];

	$pagesize = $_GET['pagesize'];

	$start = $pagenum * $pagesize;

	$query = "SELECT SQL_CALC_FOUND_ROWS * FROM tblmember1 LIMIT $start, $pagesize";

	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

	$sql = "SELECT FOUND_ROWS() AS `found_rows`;";

	$rows = mysql_query($sql);

	$rows = mysql_fetch_assoc($rows);

	$total_rows = $rows['found_rows'];

	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

		$customers[] = array(

			'relationno' => $row['relationno'],

			'memberno' => $row['memberno'],

			'membername' => $row['membername'],

			'address' => $row['address']

);

    $data[] = array(

       'TotalRows' => $total_rows,

	   'Rows' => $customers

);

	echo json_encode($data);

?>

index.php

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />

    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.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/jqxbuttons.js"></script>

    <script type="text/javascript" src="jqwidgets/jqxscrollbar.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/jqxmenu.js"></script>

    <script type="text/javascript" src="jqwidgets/jqxdata.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.pager.js"></script>

   <script type="text/javascript">

        $(document).ready(function () {

            // prepare the data

            var source =

                datatype: "json",

                datafields: [

                    { name: 'relationno', type: 'string'},

                    { name: 'memberno', type: 'string'},

                    { name: 'membername', type: 'string'},

                    { name: 'address', type: 'string'}

],

				id: 'relationno',

                url: 'data.php',

				cache: false,

				root: 'Rows',

                beforeprocessing: function (data) {

                    source.totalrecords = data[0].TotalRows;

};

            var dataAdapter = new $.jqx.dataAdapter(source);

			$("#jqxgrid").jqxGrid(

                source: dataAdapter,

                theme: 'classic',

				pageable: true,

				autoheight: true,

                virtualmode: true,

                rendergridrows: function () {

                    return dataAdapter.records;

},

                columns: [

                  { text: 'relationno', datafield: 'relationno', width: 250},

                  { text: 'memberno', datafield: 'memberno', width: 150 },

                  { text: 'membername', datafield: 'membername', width: 180 },

                  { text: 'address', datafield: 'address', width: 200 }

});

			// init Orders Grid

			$("#ordersGrid").jqxGrid(

				virtualmode: true,

				pageable: true,

				autoheight: true,

				theme: 'classic',

				rendergridrows: function (obj) {

					return [];

},

				columns: [

                  { text: 'relationno', datafield: 'relationno', width: 250},

                  { text: 'memberno', datafield: 'memberno', width: 150 },

                  { text: 'membername', datafield: 'membername', width: 180 },

                  { text: 'address', datafield: 'address', width: 200 }

});

			 $("#jqxgrid").bind('rowselect', function (event) {

				var row = event.args.rowindex;

				var id = $("#jqxgrid").jqxGrid('getrowdata', row)['relationno'];

				var source =

					url: 'data.php',

					dataType: 'json',

					data: {relationno: id},

					datatype: "json",

					cache: false,

					datafields: [

                    { name: 'relationno', type: 'string'},

                    { name: 'memberno', type: 'string'},

                    { name: 'membername', type: 'string'},

                    { name: 'address', type: 'string'}

],

					root: 'Rows',

					beforeprocessing: function (data) {

						source.totalrecords = data[0].TotalRows;

};

				var adapter = new $.jqx.dataAdapter(source);

					// initialize jqxGrid

					$("#ordersGrid").jqxGrid(

						source: adapter,

						rendergridrows: function (obj) {

							return obj.data;

});

});

});

    </script>

</head>

<body class='default'>

   <h3>Customers</h3>

   <div id="jqxgrid"></div>

   <h3>Orders by Customer</h3>

   <div id="ordersGrid"></div>

</body>

</html>

tblmember1.sql
the table contains 3000 rows, it is too big to put it here

Please help & Thanks in advance

Regards,
Steven

October 16, 2013 at 5:10 am Master Detail Grid #30792

Keymaster

Hi Steven,

It order to send us the code in attachment, please send an e-mail to support@jqwidgets.com

Best Regards,
Peter Stoev

October 16, 2013 at 7:09 am Master Detail Grid #30804

stvhui

Participant

Hi Peter Stoev

Thanks for yr information, will send you immediately.

Regards,
Steven

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

You must be logged in to reply to this topic.