AJAX 分页 - 名为沐白

主页面：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Bootstrap/js/jquery-3.2.1.min.js"></script>
<script src="../Bootstrap/js/bootstrap.min.js"></script>
<link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>


<table class="table table-striped">
  <thead>
    <tr>
      <th>地区代号</th>
      <th>地区名称</th>
      <th>父级代号</th>
    </tr>
  </thead>
  <tbody id="nr">
    
  </tbody>
</table>

<div style="width:30%; margin:0px auto">
    <ul class="pagination" id="pagelist">

    </ul>
</div>

</body>
<script type="text/javascript">
var pcount = 12;
var page = 1;
loadData();
loadPageList();

$("#btn").click(function(){
    page = 1;
    loadData();
    loadPageList();
})

function loadData(){
    var name = $("#name").val();
    $.ajax({
        url:"load.php",
        data:{page:page,pcount:pcount,name:name},
        type:"POST",
        dataType:"JSON",
        success: function(data){
            var str = "";
            for(var k in data){
                str += "<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
            }
            
            $("#nr").html(str);
        }
    });
}

function loadPageList(){
    var str = "";
    str += "<li><a id='prev'>&laquo;</a></li>";
    for(var i=page-2;i<page;i++){
        var p = i;
        if(p>0){
            str += "<li><a class='plist'>"+p+"</a></li>";
        }
    }
    str += "<li class='active'><a>"+page+"</a></li>";
    
    for(var i=page;i<=page+1;i++){
        var p = i+1;
        var zys = yeShu();
        if(p<=zys){
            str += "<li><a class='plist'>"+p+"</a></li>";
        }
    }
    str += "<li><a id='next'>&raquo;</a></li>";
    
    $("#pagelist").html(str);
    
    jiaShiJian();
}

function yeShu(){
    var ts = 0;
    var name = $("#name").val();
    $.ajax({
        async:false,
        data:{name:name},
        type:"POST",
        url:"shuliang.php",
        dataType:"TEXT",
        success: function(data){
            ts = data;
        }
    });
    
    var zys = Math.ceil(ts/pcount);
    return zys;
}

function jiaShiJian(){
    $("#prev").click(function(){
        if(page>1){
            page--;
            loadData();
            loadPageList();
        }else{
            alert("已为第一页！");
        }
    })
    $("#next").click(function(){
        var zsy = yeShu();
        if(page<zsy){
            page++;
            loadData();
            loadPageList();
        }else{
            alert("已为末尾页！");
        }
    })
    $(".plist").click(function(){
        page = parseInt($(this).text());
        loadData();
        loadPageList();
    })
}

</script>
</html>

<?php
require_once "./DBDA.class.php";
$db = new DBDA();
$page = $_POST["page"];
$pcount = $_POST["pcount"];
$tj = " 1=1 ";
$tg = ($page-1)*$pcount;
$sql = "select * from chinastates where {$tj} limit {$tg},{$pcount}";
echo $db->jsonquery($sql);

<?php
require_once "./DBDA.class.php";
$db = new DBDA();
$tj = " 1=1 ";
$sql = "select count(*) from chinastates where {$tj}";
echo $db->strquery($sql);

<?php
class DBDA{
    public $host="localhost"; //服务器地址
    public $uid="root"; //用户名
    public $pwd="123"; //密码
    public $dbname="lianxi"; //数据库名称
    
    /*
        执行一条SQL语句的方法
        @param sql 要执行的SQL语句
        @param type SQL语句的类型，0代表查询 1代表增删改
        @return 如果是查询语句返回二维数组，如果是增删改返回true或false
    */
    public function query($sql,$type=0){
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $result = $db->query($sql);
        if($type){
            return $result;
        }else{
            return $result->fetch_all();
        }
    }
    public function strquery($sql,$type=0){
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $result = $db->query($sql);
        if($type){
            return $result;
            }else{
                $arr = $result->fetch_all();
                $str = "";
                foreach($arr as $v){
                    $str .= implode("^",$v)."|";
                    }
                $str = substr($str,0,strlen($str)-1);
                return $str;
                }
        }
    public function Jsonquery($sql,$type=0){
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
        $result = $db->query($sql);
        if($type){
            return $result;
            }else{
                $arr = $result->fetch_all(MYSQLI_ASSOC);
                return json_encode($arr);
                //json_decode()将JSON转化成数组
                }
        }
}

posted on 2018-04-20 14:35 名为沐白阅读(93) 评论(0) 收藏举报

刷新页面返回顶部