ajax分页实例

  • 2018-06-05 09:42:53
  • 开发
  • 995
  • shevechco

使用AJSX分页原理：封装两个方法，一个方法负责显示，一个负责写入分页栏。

首先使用一张数据比较多的数据库中的表格：

 主界面加载后首先导入所有数据，并显示前20条数据，在访问数据库时，使用limit显示前20条：

html：

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.
<html xmlns="http://www.w3.org/1999/xhtml">
03.
    <head>
04.
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.
        <title>无标题文档</title>
06.
        <script src="jquery-1.11.2.min.js"></script>  
07.
    </head>
08.
    <body>
09.
        <div>
10.
            <input type="text" id="key" />
11.
            <input type="button" value="查询" id="chaxun" />
12.
        </div>
13.
 
14.
        <table width="100%" border="1" cellpadding="0" cellspacing="0">
15.
            <tr>
16.
                <td>代号</td>
17.
                <td>名称</td>
18.
                <td>父级代号</td>
19.
            </tr>
20.
            <tbody id="nr">
21.
            </tbody>
22.
        </table>
23.
        <div id="xinxi">
24.
        </div>
25.
    </body>
26.
</html>

 

首先把表头显示出来，要导入jq包。 

用AJAX从数据库中用limit20条每页的搜索显示第一页：

js代码：

01.
<script type="text/javascript">
02.
    var page = 1; //当前页
03.
        Load(); //加载数据
04.
                  function Load() {
05.
    var key = $("#key").val(); //查询条件
06.
     $.ajax({
07.
        url: "chuli.php",
08.
        data: {
09.
            page: page,
10.
            key: key
11.
        },
12.
        type: "POST",
13.
        dataType: "JSON",
14.
        success: function(data) {
15.
            var str = "";
16.
            for(var k in data) {
17.
                str += "<tr><td>" + data[k].AreaCode + "</td><td>" + data[k].AreaName + "</td><td>" + data[k].ParentAreaCode + "</td></tr>";
18.
            }
19.
            $("#nr").html(str);
20.
        }
21.
    });
22.
}

 chuli.php文件：

01.
<?php
02.
include("DBDA.class.php");
03.
$db = new DBDA();
04.
$page = $_POST["page"];
05.
$key = $_POST["key"];
06.
$num = 20;
07.
$tiao = ($page-1)*$num;
08.
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";
09.
echo $db->JSONQuery($sql);

这里引入了一个php的类文件：

此类文件用来返回字符串，数据库搜索结果，或者JSON数据：

DBDA.class.php

01.
<?php
02.
class DBDA
03.
{
04.
    public $host="localhost";
05.
    public $uid = "root";
06.
    public $pwd = "";
07.
    public $dbname = "12345";
08.
         //成员方法
09.
    public function Query($sql,$type=1)
10.
    {
11.
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
12.
        $r = $db->query($sql);
13.
                 if($type==1)
14.
        {
15.
            return $r->fetch_all();
16.
        }
17.
        else
18.
        {
19.
            return $r;
20.
        }
21.
    }
22.
         //返回字符串的方法
23.
    public function StrQuery($sql,$type=1)
24.
    {
25.
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
26.
        $r = $db->query($sql);
27.
                 if($type==1)
28.
        {
29.
            $attr = $r->fetch_all();
30.
            $str = "";
31.
            foreach($attr as $v)
32.
            {
33.
                $str .= implode("^",$v)."|";
34.
            }
35.
                         return substr($str,0,strlen($str)-1);
36.
         }
37.
        else
38.
        {
39.
            return $r;
40.
        }
41.
    }
42.
         //返回JSON
43.
    function JSONQuery($sql,$type=1)
44.
    {
45.
        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
46.
        $r = $db->query($sql);
47.
                 if($type==1)
48.
        {
49.
            return json_encode($r->fetch_all(MYSQLI_ASSOC));
50.
        }
51.
        else
52.
        {
53.
            return $r;
54.
        }
55.
    }
56.
}

结果：

加载另外的一个分页栏的方法，实现以下效果：

01.
function LoadXinXi() {       //加载分页信息
02.
    var str = "";
03.
    var minys = 1;
04.
    var maxys = 1;
05.
    var key = $("#key").val();
06.
     //查总页数
07.
    $.ajax({
08.
        async: false,
09.
        url: "zys.php",
10.
        data: {
11.
            key: key
12.
        },
13.
        type: "POST",
14.
        dataType: "TEXT",
15.
        success: function(d) {
16.
            maxys = d;
17.
        }
18.
    });
19.
     str += "<span>总共：" + maxys + "页</span>  ";
20.
    str += "<span id='prev'>上一页</span>";
21.
     for(var i = page - 2; i < page + 3; i++) {
22.
        if(i >= minys && i <= maxys) {
23.
            if(i == page) {
24.
                str += "<span class='dangqian' bs='" + i + "'>" + i + "</span>  ";
25.
            } else {
26.
                str += "<span class='list' bs='" + i + "'>" + i + "</span>  ";
27.
            }
28.
         }
29.
    }
30.
     str += "<span id='next'>下一页</span>";
31.
     $("#xinxi").html(str);
32.
     //给上一页添加点击事件
33.
    $("#prev").click(function() {
34.
            page = page - 1;
35.
            if(page < 1) {
36.
                page = 1;
37.
            }
38.
            Load(); //加载数据
39.
            LoadXinXi(); //加载分页信息
40.
        })
41.
        //给下一页加点击事件
42.
    $("#next").click(function() {
43.
            page = page + 1;
44.
            if(page > maxys) {
45.
                page = maxys;
46.
            }
47.
            Load(); //加载数据
48.
            LoadXinXi(); //加载分页信息
49.
        })
50.
        //给中间的列表加事件
51.
    $(".list").click(function() {
52.
        page = parseInt($(this).attr("bs"));
53.
        Load(); //加载数据
54.
        LoadXinXi(); //加载分页信息
55.
    })
56.
}

php处理文件（zys.php）：

01.
<?php
02.
include("DBDA.class.php");
03.
$db = new DBDA();
04.
$key = $_POST["key"];
05.
$num = 20;
06.
$sql = "select count(*) from chinastates where areaname like '%{$key}%'";
07.
$zts = $db->StrQuery($sql);
08.
echo ceil($zts/$num);

主页代码：

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.
<html xmlns="http://www.w3.org/1999/xhtml">
03.
    <head>
04.
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.
        <title>无标题文档</title>
06.
        <script src="jquery-1.11.2.min.js"></script>
07.
        <style type="text/css">.dangqian {
08.
    background-color: #69F
09.
}</style>
10.
    </head>
11.
     <body>
12.
         <div>
13.
            <input type="text" id="key" />
14.
            <input type="button" value="查询" id="chaxun" />
15.
        </div>
16.
         <table width="100%" border="1" cellpadding="0" cellspacing="0">
17.
            <tr>
18.
                <td>代号</td>
19.
                <td>名称</td>
20.
                <td>父级代号</td>
21.
            </tr>
22.
             <tbody id="nr">
23.
             </tbody>
24.
         </table>
25.
         <div id="xinxi">
26.
         </div>
27.
     </body>
28.
    <script type="text/javascript">var page = 1; //当前页
29.
 Load(); //加载数据
30.
LoadXinXi(); //加载分页信息
31.
 //查询
32.
$("#chaxun").click(function() {
33.
    page = 1;
34.
    Load(); //加载数据
35.
    LoadXinXi(); //加载分页信息
36.
})
37.
 function Load() {
38.
    var key = $("#key").val(); //查询条件
39.
     $.ajax({
40.
        url: "chuli.php",
41.
        data: {
42.
            page: page,
43.
            key: key
44.
        },
45.
        type: "POST",
46.
        dataType: "JSON",
47.
        success: function(data) {
48.
            var str = "";
49.
            for(var k in data) {
50.
                str += "<tr><td>" + data[k].AreaCode + "</td><td>" + data[k].AreaName + "</td><td>" + data[k].ParentAreaCode + "</td></tr>";
51.
            }
52.
            $("#nr").html(str);
53.
        }
54.
    });
55.
}
56.
 function LoadXinXi() {
57.
    var str = "";
58.
    var minys = 1;
59.
    var maxys = 1;
60.
    var key = $("#key").val();
61.
     //查总页数
62.
    $.ajax({
63.
        async: false,
64.
        url: "zys.php",
65.
        data: {
66.
            key: key
67.
        },
68.
        type: "POST",
69.
        dataType: "TEXT",
70.
        success: function(d) {
71.
            maxys = d;
72.
        }
73.
    });
74.
     str += "<span>总共：" + maxys + "页</span>  ";
75.
    str += "<span id='prev'>上一页</span>";
76.
     for(var i = page - 2; i < page + 3; i++) {
77.
        if(i >= minys && i <= maxys) {
78.
            if(i == page) {
79.
                str += "<span class='dangqian' bs='" + i + "'>" + i + "</span>  ";
80.
            } else {
81.
                str += "<span class='list' bs='" + i + "'>" + i + "</span>  ";
82.
            }
83.
         }
84.
    }
85.
     str += "<span id='next'>下一页</span>";
86.
     $("#xinxi").html(str);
87.
     //给上一页添加点击事件
88.
    $("#prev").click(function() {
89.
            page = page - 1;
90.
            if(page < 1) {
91.
                page = 1;
92.
            }
93.
            Load(); //加载数据
94.
            LoadXinXi(); //加载分页信息
95.
        })
96.
        //给下一页加点击事件
97.
    $("#next").click(function() {
98.
            page = page + 1;
99.
            if(page > maxys) {
100.
                page = maxys;
101.
            }
102.
            Load(); //加载数据
103.
            LoadXinXi(); //加载分页信息
104.
        })
105.
        //给中间的列表加事件
106.
    $(".list").click(function() {
107.
        page = parseInt($(this).attr("bs"));
108.
        Load(); //加载数据
109.
        LoadXinXi(); //加载分页信息
110.
    })
111.
}</script>
112.
</html>

实现分页效果：

 

内容版权声明：除非注明，否则皆为本站原创文章。

转载注明出处：http://www.sulao.cn/post/476

相关推荐

构建本站 Python Flask LayUI Peewee MySQL Redis
Copyright © 2025 Shevechco 耗时: 8.68ms 常用工具