AJAX - Grid: Creating Page for Final Display

AJAX Grid Step By Step Tutorial 6: This is last post of this series. We will create "index.html" and "grid.css". After it, you can test your AJAX Grid.

Index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Grid</title>
<script type="text/javascript" src="grid.js"></script>
<link href="grid.css" type="text/css" rel="stylesheet">
</head>
<body onload="init();">
  <div id="gridDiv" />
</body>
</html>

grid.css:

body
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
}

table
{
  width: 600px;
}

td.right
{
 color:darkblue;
 text-align:right;
 width:125px;
}

td.left
{
 color:darkblue;
 text-align:left;
 width:125px;
}

table.list
{
  border: solid 1px black;
}

th
{
  text-align:left;
  background-color:#FF0000;
  color:white;
  height:30px;
}

th.th1
{
  width:30px;
}

th.th2
{
  width:200px;
}

th.th3
{
  width:70px;
}

th.th4
{
  width:250px;
}

th.th5
{
  width:50px;
}

Got it! Now, point your browser to http://localhost/test/ajax/books/index.html.

Database Tutorial

Security Tutorial

Framework Tutorial

Template Tutorial

API Tutorial

Learn Facebook

JS Framework Tutorial

AJAX Tutorial

Web Services Tutorial

Package Post