Hi all,
i am developing an application that gets input from user and display the resultset inside 3 tabs(html). i am using mysql database... my problem here is when i try to paginate the result values it display 1st set of values. but when i click the 'next 10 record' link am getting an empty page.. i have attached my coding files.. can anyone suggest me how to do pagination inside the tabs?
Ambislm 0 Newbie Poster
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CallDetails</title>
<script type="text/javascript" language="javascript" src="Incoming.js"> </script>
<script type="text/css"> </script>
</head>
<body>
<?php
// variable declaration for getting values from page
$extension = $_GET["extension"];
$startdate=$_GET["startdate"];
$enddate=$_GET["enddate"];
$type=$_GET["calltype"];
// variable decalration for database connection
$DBServer = "localhost";
$DBName = "callreader";
$DBUsername = "root";
$DBPassword = "";
//pagination starts
$rec_limit = 10;
//connection starts
$conn = mysql_connect($DBServer,$DBUsername,$DBPassword);
@mysql_select_db($DBName) or $Info = "Unable to open database";
/* Get total number of records */
$sql = "SELECT count(PK) FROM calldetail";
$retval = mysql_query( $sql, $conn ) or die('Error, query failed');
$row = mysql_fetch_array($retval,MYSQL_NUM);
$rec_count=$row[0];
if(isset($_GET{'page'}))
{
$page = $_GET{'page'} +1;
$offset = $rec_limit * $page;
}
else
{
$page=1;
$offset=0;
}
$left_rec=$rec_count - ($page * $rec_limit);
$sql = "SELECT PK,CallFlag,CallTrunk,CallTermination,CallStartTime,CallDuration,
CallPulse,CallDate,CalledNumber,CallOrigin,Cost,Currency FROM callreader.calldetail where CallFlag=" . $type . " and CallTermination=" . "'"
. $extension . "'" . " and CallDate between ". "'" . $startdate . "'" . " and " . "'"
. $enddate . "'";// . "limit $offset,$rec_limit";
// echo $sql;
$retval=mysql_query($sql,$conn);
if(!retval)
{
die('could not get data:' . mysql_error);
}
//$numrows=mysql_num_rows($result);
//$i=0;
//mysql_close($conn);
?>
<table border="1" cellspacing="1" cellpadding="1" width="100%" style="margin-top:5pt;">
<tr align="center" bgcolor="white" style="color:black; font-size: 10pt">
<th> PK </th>
<th> Call Flag </th>
<th> Call Trunk </th>
<th> Call Termination</th>
<th> Call StartTime </th>
<th> Call Duration </th>
<th> Call Pulse </th>
<th> Call date </th>
<th> Called Number </th>
<th> Call Origin </th>
<th> Cost </th>
<th> Currency </th>
</tr>
<?php
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$pk = $row['PK'];
$callflag = $row['CallFlag'];
$calltrunk = $row['CallTrunk'];
$callterminate = $row['CallTermination'];
$starttime = $row['CallStartTime'];
$duration = $row['CallDuration'];
$callpulse = $row['CallPulse'];
$calldate = $row['CallDate'];
$callednumber = $row['CalledNumber'];
$callorigin = $row['CallOrigin'];;
$cost = $row['Cost'];
$currency = $row['Currency'];
?>
<tr>
<td> <?php echo $pk ?> </td>
<td> <?php echo $callflag ?> </td>
<td> <?php echo $calltrunk ?> </td>
<td> <?php echo $callterminate ?> </td>
<td> <?php echo $starttime ?> </td>
<td> <?php echo $duration ?> </td>
<td> <?php echo $callpulse ?> </td>
<td> <?php echo $calldate ?> </td>
<td> <?php echo $callednumber ?> </td>
<td> <?php echo $callorigin ?> </td>
<td> <?php echo $cost ?> </td>
<td> <?php echo $currency ?> </td>
</tr>
<?php
}
?>
</table>
<?php
if( $page > 0 )
{
$last = $page - 2;
echo "<a href=\"index.php?page=$last\">Last 10 Records</a> |";
echo "<a href=\"index.php?page=$page\">Next 10 Records</a>";
}
else if( $page == 0 )
{
echo "<a href=\"$_PHP_SELF?page=$page\">Next 10 Records</a>";
}
else if( $left_rec < $rec_limit )
{
$last = $page - 2;
echo "<a href=\"$_PHP_SELF?page=$last\">Last 10 Records</a>";
}
mysql_close($conn);
?>
</body>
</html>var url;
var http = getHTTPObject(); // We create the HTTP Object
function handleHttpResponse()
{
if (http.readyState == 4)
{
if(http.status==200)
{
var results=http.responseText;
if(dividname==0)
document.getElementById('incomingresult').innerHTML = results;
if(dividname==1)
document.getElementById('outgoingresult').innerHTML = results;
if(dividname==2)
document.getElementById('missedresult').innerHTML = results;
}
}
}
function requestCustomerInfo()
{
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject()
{
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp)
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
function getCallDetails(dividname)
{
var startdate=document.getElementById("startdt").value;
var enddate=document.getElementById("enddt").value;
var extension=document.getElementById("extension").value;
if(dividname==0)
url= "CallDetails.php?&startdate=" + startdate + "&enddate=" + enddate + "&extension=" + extension + "&calltype='L'";
if(dividname==1)
url= "CallDetails.php?&startdate=" + startdate + "&enddate=" + enddate + "&extension=" + extension + "&calltype='C'";
if(dividname==2)
url= "CallDetails.php?&startdate=" + startdate + "&enddate=" + enddate + "&extension=" + extension + "&calltype='M'";
requestCustomerInfo();
}The attachment preview is chopped off after the first 10 KB. Please download the entire file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Call Reader Information</title>
<script type="text/javascript" language="javascript" src="DatePicker.js"></script>
<script type="text/javascript" language="javascript" src="Incoming.js"></script>
<script type="text/javascript">
var dividname;
function TabView(id, current)
{
if(typeof(TabView.cnt) == "undefined")
{
TabView.init();
}
current = (typeof(current) == "undefined") ? 0 : current;
this.newTab(id, current);
}
TabView.init = function()
{
TabView.cnt = 0;
TabView.arTabView = new Array();
}
TabView.switchTab = function(TabViewIdx, TabIdx)
{
TabView.arTabView[TabViewIdx].TabView.switchTab(TabIdx);
}
TabView.prototype.newTab = function(id, current)
{
var TabViewElem, idx = 0, el = '', elTabs = '', elPages = '';
TabViewElem = document.getElementById(id);
TabView.arTabView[TabView.cnt] = TabViewElem;
this.TabElem = TabViewElem;
this.TabElem.TabView = this;
this.tabCnt = 0;
this.arTab = new Array();
// Loop through the elements till the object with
// classname 'Tabs' is obtained
elTabs = TabViewElem.firstChild;
while(elTabs.className != "Tabs" )elTabs = elTabs.nextSibling;
el = elTabs.firstChild;
do
{
if(el.tagName == "A")
{
el.href = "javascript:TabView.switchTab(" + TabView.cnt + "," + idx + ");";
this.arTab[idx] = new Array(el, 0);
this.tabCnt = idx++;
}
}while (el = el.nextSibling);
// Loop throught the elements till the object with
// classname 'Pages' is obtained
elPages = TabViewElem.firstChild;
while (elPages.className != "Pages")elPages = elPages.nextSibling;
el = elPages.firstChild;
idx = 0;
do
{
if(el.className == "Page")
{
this.arTab[idx][1] = el;
idx++;
}
}
while (el = el.nextSibling);
this.switchTab(current);
// Update TabView Count
TabView.cnt++;
}
TabView.prototype.switchTab = function(TabIdx)
{
var Tab;
if(this.TabIdx == TabIdx)return false;
for(idx in this.arTab)
{
Tab = this.arTab[idx];
if(idx == TabIdx)
{
Tab[0].className = "ActiveTab";
Tab[1].style.display = "block";
Tab[0].blur();
}
else
{
Tab[0].className = "InactiveTab";
Tab[1].style.display = "none";
}
}
this.TabIdx = TabIdx;
//alert("Hello "+this.TabIdx)
dividname=TabIdx;
}
function init()
{
t1 = new TabView('TabView1');
t2 = new TabView('TabView2', 1);
}
</script>
<style type="text/css">
body,div,table
{
font:normal 11px Verdana, Arial, sans-serif;
}
.TabView
{
width : 1230px;
height : 454px;
border : 1px #CCC solid;
margin : 0px;
}
.TabView .Tabs
{
height : 25px;
display : block;
background : #FFF;
}
.TabView .Tabs a
{
display : block;
float : left;
width : 399px;
height : 25px;
line-height : 26px;
color : #3F87E2;
text-align : center;
font-weight : bold;
border : 1px black outset;
margin : 0px 1px;
text-decoration: none;
font-size : 11pt;
}
.TabView .Tabs a.ActiveTab
{
background : #3F87E2;
color : black;
border : 1px #FFF solid;
border-bottom : 1px #FFF solid;
}
.TabView .Tabs a.InactiveTab
{
}
.TabView .Pages
{
width : 100%;
overflow-y : scroll;
}
.TabView .Pages .Page
{
border : 1px #CCC solid;
height : 422px;
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
font-family: Helvetica, Arial;
font-size: 12px;
text-align: center;
color: #505050;
background-color: #ece9d8;
border: 1px solid #AAAAAA;
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
background-color: #aca998;
border: 1px solid #888888;
cursor: pointer;
color: red;
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
color: white;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
font-size: 12px;
color: gray;
font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
color: #4060ff;
font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
padding: 0px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
}
</style>
</head>
<body onload="init()">
<center>
<img src="call.gif" alt="SKS CallReaders">
</center>
<fieldset style="border-color: #3F87E2">
<legend style="font-size: 14pt; color:#3F87E2">
<b> Calls information: </b>
</legend>
<table>
<tr style="font-size:10pt">
<td><b> From Date </b></td>
<td><input type="text" name="startdt" id="startdt" size="10" > <img src="calendar.gif" alt="Calendar" id='img1' onclick="displayDatePicker('startdt', this);"><td>
</tr>
<tr style="font-size:10pt">
<td><b> End Date </b></td>
<td><input type="text" name="enddt" id="enddt" size="10" > <img src="calendar.gif" id='img2' alt="Calendar" onclick="displayDatePicker('enddt', this);"> </td>
</tr>
<tr style="font-size:10pt">
<td> <b>Extension</b></td>
<td> <input name="extension" id="extension" type="text" > </td>
<td> <input type="image" id="extension" name="extension" src="phoneimg.gif" onclick="getCallDetails(dividname)"></td>
</tr>
</table>
</fieldset>
<br/>
<fieldset style="border-color:#3F87E2;">
<legend style="font-size: 14pt; color:#3F87E2"> Call Details </legend>
<table style="width:50%;height:100%;">
<tr><td>
<br/>
<center>
<!--Begin TabView Block-->
<!--First Tab-->
<div class="TabView" id="TabView1" >
<!--Tabs-->
<div class="Tabs"><a>Incoming Calls</a> <a>Outgoing Calls</a> <a>Missed Calls</a></div>
<!--Pages-->
<div class="Pages">
<!Tab 1-->
<div class="Page" id="incomingresult" onmouseover="getCallDetails(0)"> </div>
<!--Tab 2-->
<div class="Page" id="outgoingresult" onmouseover="getCallDetails(1)"> </div>
<!-- Tab 3-->
whiteyoh 0 Posting Pro in Training
without looking at your code id guess that your first list is fine, but you need to get a second variable into the URL as the market for the 2nd page
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.