如何在不刷新页面的情况下重新加载数据

Question

i do have the code below, and im trying to update the data without refreshing the page with pagination. 我确实有下面的代码，我试图更新数据而不用分页刷新页面。 i have tried many thing taken from stackoverflow but not succeeded. 我已经尝试了很多从stackoverflow中获取的东西，但是没有成功。

PHP-- PHP--

<?php
$auth_id = mysql_real_escape_string($_GET['id']);
$auths_id = mysql_real_escape_string($_GET['id']);
/**
 * @link: http://www.Awcore.com/dev
 */
    //connect to the database
    include_once ('db/config_books.php'); 
    //get the function
    include_once ('includes/function_ulema.php');



        $page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
        $limit = 5;
        $startpoint = ($page * $limit) - $limit;

        //to make pagination
        $statement = "books b LEFT OUTER JOIN authors_compile_rel ar ON (b.id = ar.book_id)
        where b.status = 1 AND ( b.auth_id = '".$auth_id."' OR b.t_auth_id = '".$auth_id."' OR ar.auth_id = '".$auth_id."' )";
?>
<!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" xml:lang="en" lang="en">

<head>
    <title>Pagination</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="css/pagination_ulema.css" rel="stylesheet" type="text/css" />
    <link href="css/grey_ulema.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .records {
            width: 510px;
            margin: 5px;
            padding:2px 5px;
            border:1px solid #B6B6B6;
        }

        .record {
            color: #474747;
            margin: 5px 0;
            padding: 3px 5px;
            background:#E6E6E6;  
            border: 1px solid #B6B6B6;
            cursor: pointer;
            letter-spacing: 2px;
        }
        .record:hover {
            background:#D3D2D2;
        }


        .round {
            -moz-border-radius:8px;
            -khtml-border-radius: 8px;
            -webkit-border-radius: 8px;
            border-radius:8px;    
        }    
    </style> 
</head>

<body>

    <div class="records round">

        <?php
            //show records
            $query = mysql_query("
SELECT 
b.id, b.unique_name, b.native_name, b.auth_id, b.status, b.create_date, ar.auth_id 
FROM books b LEFT OUTER JOIN authors_compile_rel ar ON (b.id = ar.book_id)
WHERE 
b.status = 1 AND ( b.auth_id = ".$auth_id." OR b.t_auth_id = ".$auth_id." OR ar.auth_id = ".$auth_id." )
ORDER by b.id DESC 
            LIMIT {$startpoint} , {$limit}");

            while ($row = mysql_fetch_assoc($query)) {
        ?>
            <div class="record round"><?php echo $row['id']; echo " - "; echo $row['unique_name']; ?></div>
        <?php    
            }
        ?>
    </div>

<?php
    echo pagination($statement,$limit,$page);
?>

</body>
</html>

and i do have the function file of pagination below: 我确实有下面的分页功能文件：

<?php
$auth_id = mysql_real_escape_string($_GET['id']);
$auths_id = mysql_real_escape_string($_GET['id']);
/**
 * @link: http://www.Awcore.com/dev
 */

   function pagination($query, $per_page = 10,$page = 1, $url = '?' ){        
        $query = "SELECT COUNT(*) as `num` FROM {$query}";
        $row = mysql_fetch_array(mysql_query($query));
        $total = $row['num'];
        $auth_ids   =   $row['auth_id'];
        $adjacents = "2"; 

        $page = ($page == 0 ? 1 : $page);  
        $start = ($page - 1) * $per_page;                               

        $prev = $page - 1;                          
        $next = $page + 1;
        $lastpage = ceil($total/$per_page);
        $lpm1 = $lastpage - 1;

        $pagination = "";
        if($lastpage > 1)
        {   
            $pagination .= "<ul class='pagination'>";
                    $pagination .= "<li class='details'>Page $page of $lastpage</li>";
            if ($lastpage < 7 + ($adjacents * 2))
            {   
                for ($counter = 1; $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page)
                        $pagination.= "<li><a class='current'>$counter</a></li>";
                    else
                        $pagination.= "<li><a href='{$url}page=$counter&id={$_GET['id']}'>$counter</a></li>";                   
                }
            }
            elseif($lastpage > 5 + ($adjacents * 2))
            {

                if($page < 1 + ($adjacents * 2))        
                {
                    for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
                    {
                        if ($counter == $page)
                            $pagination.= "<li><a class='current'>$counter</a></li>";
                        else
                            $pagination.= "<li><a href='{$url}page=$counter&id={$_GET['id']}'>$counter</a></li>";                   
                    }
                    $pagination.= "<li class='dot'>...</li>";
                    $pagination.= "<li><a href='{$url}page=$lpm1&id={$_GET['id']}'>$lpm1</a></li>";
                    $pagination.= "<li><a href='{$url}page=$lastpage&id={$_GET['id']}'>$lastpage</a></li>";     
                }
                elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
                {
                    $pagination.= "<li><a href='{$url}page=1&id={$_GET['id']}'>1</a></li>";
                    $pagination.= "<li><a href='{$url}page=2&id={$_GET['id']}'>2</a></li>";
                    $pagination.= "<li class='dot'>...</li>";
                    for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
                    {
                        if ($counter == $page)
                            $pagination.= "<li><a class='current'>$counter</a></li>";
                        else
                            $pagination.= "<li><a href='{$url}page=$counter&id={$_GET['id']}'>$counter</a></li>";                   
                    }
                    $pagination.= "<li class='dot'>..</li>";
                    $pagination.= "<li><a href='{$url}page=$lpm1&id={$_GET['id']}'>$lpm1</a></li>";
                    $pagination.= "<li><a href='{$url}page=$lastpage&id={$_GET['id']}'>$lastpage</a></li>";     
                }
                else
                {
                    $pagination.= "<li><a href='{$url}page=1&id={$_GET['id']}'>1</a></li>";
                    $pagination.= "<li><a href='{$url}page=2&id={$_GET['id']}'>2</a></li>";
                    $pagination.= "<li class='dot'>..</li>";
                    for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
                    {
                        if ($counter == $page)
                            $pagination.= "<li><a class='current'>$counter</a></li>";
                        else
                            $pagination.= "<li><a href='{$url}page=$counter&id={$_GET['id']}'>$counter</a></li>";                   
                    }
                }
            }

            if ($page < $counter - 1){ 
                $pagination.= "<li><a href='{$url}page=$next&id={$_GET['id']}'>Next</a></li>";
                $pagination.= "<li><a href='{$url}page=$lastpage&id={$_GET['id']}'>Last</a></li>";
            }else{
                $pagination.= "<li><a class='current'>Next</a></li>";
                $pagination.= "<li><a class='current'>Last</a></li>";
            }
            $pagination.= "</ul>\n";        
        }


        return $pagination;
    } 
?>

Please help me with integration of the javascript to load the data with pagination without refreshing page. 请帮助我集成javascript以分页加载数据而无需刷新页面。

Answer 1

What you are looking for is called Ajax. 您正在寻找的被称为Ajax。 Take a look here: http://www.w3schools.com/ajax/ajax_intro.asp When a user clicks on a next page you could catch that action with JS and push the selected page to your Ajax script which then calculates an offset for the new data to load. 在这里看一下： http : //www.w3schools.com/ajax/ajax_intro.asp当用户单击下一页时，您可以使用JS捕获该动作并将所选页面推到您的Ajax脚本中，然后为该脚本计算偏移量要加载的新数据。 Is that the answer you are looking for or are you looking for code? 这是您正在寻找的答案还是您在寻找代码？

如何在不刷新页面的情况下重新加载数据

问题描述

1 个解决方案

解决方案1
1 2015-08-05 12:04:40

如何在不刷新页面的情况下重新加载数据

问题描述

1 个解决方案

解决方案1 1 2015-08-05 12:04:40

解决方案1
1 2015-08-05 12:04:40