Forum
Log In
Home
Topic RSS
08:08
02/03/2010
Offline
Hi i am new to web development and have been playing around with jqgrid recently. I tried to include a header but it seems to mess up the font size of the table. Could someone please let me know why this is happening and how i would go about fixing it.
<html>
<head>
<title> Bounding Box </title>
</head>
<div id="menu" align="right" >
<a href="Main.php">HOME</a>
<a href="Lookup.php">LOOKUP</a>
<a href="Edit.php">EDIT</a>
<a href="Create.php">CREATE</a>
</br>
</br>
</br>
<hr>
</div>
</html>
<?php
ob_start();
include('Header.html');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#grid").jqGrid({
url:'db.php',
datatype: "json",
mtype: 'GET',
colNames:['ID'],
colModel:[
{name:'id',index:'id, width:500, sortable:false, editable:false},
],
jsonReader : {
repeatitems:false
},
rowNum:100000000,
rowList:[100000000, 10,20,30],
loadComplete: function()
{
$("option[value=100000000]").text('All');
},
pager: jQuery('#gridpager'),
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Wines",
}).navGrid('#gridpager');
});
</script>
</head>
<body>
...
<div id="jqgrid">
<table id="grid"></table>
<div id="gridpager"></div>
</div>
...
</body>
</html>
<?php
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
$dbhost = "localhost";
$dbuser = "tester";
$dbpassword ="test";
$database = "tester";
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM testTable");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT ID, ID FROM testTable ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[ID];
$i++;
}
echo json_encode($responce);
?>
All it does right now is just show the primary key ID from my testTable. With the header iincluded the font-size seems to have increased.
Thanks
08:52
12/02/2010
Offline
Hello,
Seems your code and html is all gobbled up, if may I suggest you start here http://www.trirand.com/jqgridw.....first_grid then once you've a working basic grid, you add more and more functionality.
hth,
lupin
05:07
02/03/2010
Offline
Hi lupin,
The myfirstjqgrid.php and db.php are modified from the source code provided in the example. I just output a table with one colomn with the ID. The header.html is a separte file which has links to be shown in the top right corner, but when i include the header the fontsize of the table increases and does not look good.
09:12
12/02/2010
Offline
hello,
I don't get what you really wanted, since looking at your code you want to include a complete set of html document inside a head tag?
Won't be the output of of that end up like this?
<html>
<head>
//this the one you insert/included
<html>
<head>
</head>
</html>
//end
</head>
</html>
I suggest you try this first /jqgridwiki/doku.php?id=wiki:first_grid and then work from there. It sets the font-size as well. If you want to include a separate header file,there's should more tutorial on net, also your div menu shouldn't it belong to body element?
hth,
lupin
Most Users Ever Online: 994
Currently Online:
40 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
