zoukankan      html  css  js  c++  java
  • PHP、jQuery、jQueryPager结合实现Ajax分页

    建立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>
        <title>jQuery.pager.js Test</title>
        <link href="Pager.css" rel="stylesheet" type="text/css" />
        <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
        <script src="jquery.pager.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
                $("#pager").pager({ pagenumber: 1, pagecount: 2, buttonClickCallback: PageClick });
        });
    function CreateQueryString(pageclickednumber)
    {
        var querystr="pager="+pageclickednumber+"&count=1";
        return querystr;
    }

    function TestClick(pageclickednumber)
    {
        $.ajax({
               type:"POST",
               url:"../test/index.php",
               data:CreateQueryString(pageclickednumber),
               success:function(data){
                               $("#content").html(data);
               }
               });

    }
    PageClick = function(pageclickednumber)
    {
            TestClick(pageclickednumber);
            //alert(pageclickednumber);
            $("#pager").pager({ pagenumber: pageclickednumber,
                        pagecount: 2, buttonClickCallback: PageClick });
    }

    //$("#result").html("测试jQuery分页器 当前第" + pageclickednumber + "页"); 

    </script>
    </head>
    <body>
    <div id="content">当前第页的内容</div>
    <div id="pager" ></div>
    <!--
    <h1 id="result">测试jQuery分页器 </h1> <div id="pager" ></div>
    -->

    </body>
    </html>

    服务器响应PHP文件:

    <?php
        header("content-type:text/html;charset:utf-8");
        $db = @ mysql_connect("127.0.0.1","root","adsg");
        mysql_select_db("tcrm");
        $rs=mysql_query("set names utf8");
        //如果传递了pager参数
        if(isset($_POST['pager']) && isset($_POST['count']))
        {
            echo GetDeptpager($_POST['count'],$_POST['pager']);
        }
        else
        {
            echo "没有传入参数!";
        }
        function GetDeptPager($count,$pager)
        {
            $rs=mysql_query("select * from dept limit ".($pager-1)*$count.",".$count);
            while ($r=mysql_fetch_assoc($rs))
            {
                $temp[]=$r;
            }
            $s="<table border=1>";
            foreach($temp as $k=>$v)
            {
                $s.='<tr><td>部门编码</td><td>'.$v['DeptCode'].'</td><td>部门名称</td><td>'.$v['DeptName'].'</td></tr>';   
            }
            $s.="</table>";
            echo $s;
            //echo '每页记录数:'.$count.'当前页码:'.$pager;
        }

    ?>

    该测试可以使用jQuerypager来实现Ajax分页,但第一次显示的时候没有显示第一页数据,需要改进一下。

  • 相关阅读:
    Python超轻量数据库之SQLite
    Docker镜像管理透析
    Docker-Compose实战「下篇」
    Docker-Compose实战「上篇」
    Docker-Compose初体验
    Docker火遍全球!dockerfile构建你必须得会
    Docker轻量管理Dashboard
    MongoDB入门实操《上篇》
    用LinkedList完成一个堆栈MyStack.2
    [翻译] 基于.NET Core构建微服务 第五部分:Marten域聚合的理想仓库
  • 原文地址:https://www.cnblogs.com/GarfieldTom/p/1501143.html
Copyright © 2011-2022 走看看