Forum:

HTML Pages with CSS and JavaScript

Pagination Problem

Ranch Hand

Posts: 79

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

hi ranches,

am developing a application that fetches data from mysql database.
i am using php, javascript for developing and html, css to design.

i have attached a screenshot which describe my page..
The problem am getting is when i click next 10 record the page is initalized to zero though there are records..
can any one suggest me where the problem might be?

here is the code where i fetch records and do paging.

<!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="TabScript.js" >   </script>
        <script type="text/javascript" language="javascript" src="CallMainPage.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);
        //echo "connection successful";

@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=0;
            $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 CallTermination=" . "'"
        . $extension . "'" . " and CallDate between ". "'" . $startdate . "'" . " and " . "'"
        . $enddate   . "'" . " limit $offset,$rec_limit";
       // echo $sql;
        $retval=mysql_query($sql,$conn);

//$numrows=mysql_num_rows($result);
        //$i=0;
        //mysql_close($conn);
        ?>

<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))
        {
                //  $f1=mysql_result($result,$i,"PK");
                $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'];
     ?>

<?php
    }
    ?>
    </table>
    <?php
                if( $page > 0 )
                {
                    $last = $page - 2;
                    echo "<a href=\"$_PHP_SELF?page=$last\">Last 10 Records</a> |";
                    echo "<a href=\"$_PHP_SELF?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>

sample.png

David Newton

Author

Posts: 12617

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ever hear of SQL injection attacks? You'll *really* want to look in to that.

By "there are records" what do you mean? That they're in the database, or that they're successfully retrieved from the DB and your loop is wrong? If you run the "next page" query manually, does it work?

How do you go *back* through the records?

Ugh, every time I see PHP I am reminded why I really dislike it as a language.

David Newton

Author

Posts: 12617

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This doesn't really seem to be an HTML or JavaScript question, but PHP.

Maya Naga

Ranch Hand

Posts: 79

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

ya the records are fetched from database.
but the problem is it does not work inside tabs.
i need suggestion from you all, how to display it inside the tab as in the screenshot

David Newton

Author

Posts: 12617

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Tabs? I don't even recall seeing anything about tabs in the original post.

That would depend on how you're implementing your tabs--I don't see anything in the code you posted about that, so I don't really know how to help other than to point you at the web: there are thousands of pages detailing any of the hundreds of ways there are to implement tabs.

I was serious about the SQL injection--anybody using your page could delete all the records in your database, unless PHP does more under-the-covers now than I remember it doing.

Maya Naga

Ranch Hand

Posts: 79

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

let me give my other php and java script codings where i actually passing the values:

index.php

.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;
            }
</style>
  <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="calendar1.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="calendar1.gif" id='img2' alt="Calendar" onclick="displayDatePicker('enddt', this);">
                        </td>
                    </tr>
                    <tr style="font-size:10pt">
                        <td> <b>[b]Extension[/b]</b></td>
                        <td> <input name="extension" id="extension" type="text"   > </td>
                        <td> <input type="image" id="extension" name="extension" src="phoneimg.gif"  onclick="getCallDetails('L')"></td>
                    </tr>
                </table>
                        <table width=50%>
                    <tr>
                        <td style="font-size:10pt">
                            <input type="radio" checked="checked" name="Calls" value="incoming" id="optSingle" name="optSingle" onclick="selectpage(name)" >Single  
                        </td>
                        <td style="font-size:10pt">
                            <input type="radio" name="Calls" value="outgoing" id="optDat" name="optDat" onclick="selectpage(name)" >Datewise  
                        </td>
                    </tr>
                </table>          
        </fieldset>
        <br/>
        <fieldset style="border-color:#3F87E2;">
            <legend style="font-size: 14pt; color:#3F87E2">
                Call Details
            </legend>
            <form name="callinfo" method="post">
                <table style="width:50%;height:100%;" >
                    <tr><td>
                            <br/>
                            <center>

<div class="TabView" id="TabView1" >
                                    
                                    <div class="Tabs"><a>Incoming Calls</a> <a>Outgoing Calls</a> <a>Missed Calls</a></div>
                                    
                                    <div class="Pages" >
                                        <!Tab 1-->
                                        <div class="Page" id="incomingresult" onclick="getCallDetails('L')" >
                                           
                                        </div>
                                        
                                        <div class="Page" id="outgoingresult" onclick="getCallDetails('C')">
                                           
                                        </div>
                                        <div class="Page" id="missedresult" onclick="getCallDetails('M')">
                                                                                   </div>
                                    </div>
                                </div>
                            </center>
                        </td>
                    </tr>
                </table>
            </form>
        </fieldset>

the above code creates tabs and in extension <td> am calling getCallDetails() function..
following is the javascript coding

CallDetails.js

var url;
var http = getHTTPObject(); // We create the HTTP Object
function handleHttpResponse()
{
    if (http.readyState == 4)
    {
        var results=http.responseText;
        if(http.status==200)
        {            
            document.getElementById('incomingresult').innerHTML = results;
        }
    }
}

function requestCustomerInfo()
{            
    http.open("GET", url, true);
    http.onreadystatechange = handleHttpResponse;
    http.send(null);
}

i think this may help you to figure out my problem...
thank you..

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

When you use innerHTML to add content and it contains script tags, they do not get evaluated. Plus it is also bad to return a full html doc and stick it into the middle of the page. Think what the browser deals with with multiple head, body, and html tags.

Eric

Maya Naga

Ranch Hand

Posts: 79

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

yes thanks eric..
Could you suggest me a solution, Mr.Eric?

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Use jQuery, that is my solution.

Eric

Politics n. Poly "many" + ticks "blood sucking insects". Tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing