Rumah > hujung hadapan web > tutorial js > Ajax写分页查询(实现不刷新页面)

Ajax写分页查询(实现不刷新页面)

韦小宝
Lepaskan: 2018-01-01 18:21:42
asal
1865 orang telah melayarinya

本文主要介绍了Ajax写分页查询(实现不刷新页面)的实例,具有很好的参考和学习ajax的价值,下面跟着小编一起来看下Ajax写分页查询(实现不刷新页面)吧

要求:

获取数据库中大量的信息显示在页面上,必然要使用到分页查询;

若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好,

所以最好使用Ajax的方法写分页查询;

1.先来找一张数据很多的表吧!

一张简单的表

代码,引入jquery包:

<script src="jquery-1.11.2.min.js"></script>

写一张表格,显示我们的代号跟名称:

1

2

3

4

5

6

7

8

9

10

11

<table class="table table-striped">

 <thead>

 <tr>

 <td>代号</td>

 <td>名称</td>

 <td>操作</td>

 </tr>

 </thead>

 <tbody id="td">

 </tbody>

</table>

Salin selepas log masuk

这些都很简单,没毛病!

2.设一个当前页,定义一个变量为1(第一页):

1

2

var page = 1;

//当前页,默认等于1

Salin selepas log masuk

3.下面来写第一个方法:需要用ajax,这个方法主要起查询,且分页的作用:

1

2

3

4

5

6

7

8

9

10

11

12

13

function load()

 {

 $.ajax({

  url: "jiazai.php",

// 显示所有的数据不用写data

  data:{page:page},

//当前页记得传过去

  type:"POST",

  dataType: "TEXT",

  success: function (data) {

  }

 });

 }

Salin selepas log masuk

4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据,用到limit:

1

2

3

4

5

6

7

8

9

10

11

<?php

include ("db.class.php");

$db = new db();

$page=$_POST["page"];

//去当前页page

$num = 3;

//每页显示几条

$tg = ($page-1)*3;//跳过几条

$sql = "select * from min limit {$tg},{$num}";

//limit:两个参数,第一个是跳过多少条,第二个是取多少条

echo $db->Query($sql);

Salin selepas log masuk

做完了第一步,来看看图:

显示数据实现!

好的,每页先是三条数据已经实现了,(页面变成这样我用了美化网页的Bookstrap,前面有讲到)

5.显示分页信息,写一个方法,先用ajax先获取总页数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function loadfenye()

 {

 var s = "";

 //用于接收

 var xiao = 1;

// 最大页

 var da = 1;

// 最小页

 $.ajax({

 async:false,

//  做成同步

 url:"zys.php",

 dataType:"TEXT",

 success:function(data){

 da = data;

 //最大页数

  }

});

 }

Salin selepas log masuk

接下来做查询总页数的php页面:

1

2

3

4

5

6

7

8

9

<?php

//查询总页数

include ("db.class.php");

$db = new db();

$sql = "select count(*) from min";

$zts = $db->strquery($sql);

//总条数

echo ceil($zts/3);

//ceil向上取整

Salin selepas log masuk

好啦,总页数获取到了,回来把分页写完吧:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

//加载分页信息方法

 function loadfenye()

 {

  var s = "";

  //用于接收

  var xiao = 1;

//  最大页

  var da = 1;

//  最小页

  $.ajax({

 async:false,

//   做成同步

 url:"zys.php",

 dataType:"TEXT",

 success:function(data){

  da = data;

  //最大页数,查到的最大页数交个默认的最大页数

   }

});

//加载上一页

  s += "<li><a>«</a></li>";

//  加载分页列表

for(i=page-4;i<page+5;i++)

{

 //i代表列表的页数

 if(i>=xiao && i<=da)

 {

  s += " <li><a>"+i+"</a></li>"

 }

}

  //  加载下一页

  s += "<li><a>»</a></li>";

$("#fenye").html(s);

 }

Salin selepas log masuk

这样写完了以后,来看图:

分页的信息也显示出来了

6.来把默认选中页数的背景色来改变一下吧

看一下Bookstrap;改背景色的方法吧:

很显然是多了一个active的样式,我们用判断给加上吧

1

2

3

4

5

6

7

if(i>=xiao && i<=da) {

  if (i == page) {

   s += " <li class=&#39;active&#39;><a>" + i + "</a></li>"

  }

  else {

   s += " <li><a>" + i + "</a></li>";

  }

Salin selepas log masuk

好了,看一下:

可以,没毛病

7.做页数的点击事件,实现点击页数跳转到该页数并显示数据,还要更新列表;

先给数字列表加上一个class

s += " <li class=&#39;active list&#39;><a>" + i + "</a></li>"

然后写方法:

1

2

3

4

5

6

7

8

9

10

11

12

13

//给列表加上点击事件

  $(".list").click(function(){

   //改变当前页数

   //把点击的页数,扔给page(当前页)

   page = $(this).text();

//   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

 }

Salin selepas log masuk

当我点击第五页:

没毛病;

8.再来就是上一页和下一页的点击事件了,首先是上一页的点击事件:

首先在上一页的列表里加上class,便于写事件:

s += "<li class=&#39;sy&#39;><a>«</a></li>";

来,上一页点击事件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$(".sy").click(function(){

   //改变当前页

   if(page>1)

   {

    //如果不是第一页

    page = parseInt(page) - 1;

   }

   //   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

Salin selepas log masuk

下一页的点击事件:

同上:列表里加上class,便于写事件:

s += "<li class=&#39;xy&#39;><a>»</a></li>";

下一页点击事件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//下一页点击事件

  $(".xy").click(function(){

//   alert(da);

   if(page<da)

   {

    //如果不是第一页

    page = parseInt(page) + 1;

   }

   //   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

Salin selepas log masuk

好,完美实现ajax分页查询;

8.再加一个按条件查询:

加上文本框:

1

2

3

4

<p>

 <input type="text" id="name"/>

 <input type="button" id="chaxun" value="查询"/>

</p>

Salin selepas log masuk

来写点击事件:

1

2

3

4

5

6

7

8

9

//给查询加点击事件

 $("#chaxun").click(function(){

  //重新加载

  //调用load方法

  load();

  //把加载数据封装成一个方法

  loadfenye();

  //加载分页信息方法

 })

Salin selepas log masuk

接下来我们需要改一下这两个方法:

ajax只需要把文本框的name传过去就好啦:

1

2

data:{page:page,name:name},

   type:"POST",

Salin selepas log masuk

1

2

data:{name:name},

 type:"POST",

Salin selepas log masuk

在处理页面,设置一个恒等的条件:

1

2

3

4

5

6

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

 $name = $_POST["name"];

 $tj = " name like &#39;%{$name}%&#39; ";

}

Salin selepas log masuk

最后在sql语句后面调用就好啦

图:

页面不刷新的分页查询就欧克了;

源码:

显示页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <link href="dist/css/bootstrap.min.css" rel="external nofollow" type="text/css">

 <script src="jquery-1.11.2.min.js"></script>

 <script src="dist/js/bootstrap.min.js"></script>

<style type="text/css">

 .xq{

  margin-left: 5px;

 }

 #fenye li:hover{

  cursor:pointer ;

 }

</style>

 

 

<h1>显示数据</h1>

<p>

 <input type="text" id="name"/>

 <input type="button" id="chaxun" value="查询"/>

</p>

<br>

<table class="table table-striped">

 <thead>

 <tr>

  <td>代号</td>

  <td>名称</td>

  <td>操作</td>

 </tr>

 </thead>

 <tbody id="td">

 </tbody>

</table>

<br>

<p></p><ul class="pagination" id="fenye">

<!--  <li><a href="#" rel="external nofollow" rel="external nofollow" >«</a></li>-->

<!--  <li><a href="#" rel="external nofollow" rel="external nofollow" >»</a></li>-->

 </ul><p></p>

<!--模态框-->

<!-- 模态框(Modal) -->

<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

 </p><p class="modal-dialog">

  </p><p class="modal-content">

   </p><p class="modal-header">

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

    </p><h4 class="modal-title" id="myModalLabel">详情</h4>

   <p></p>

   <p class="modal-body" id="nr">

   </p>

   <p class="modal-footer">

    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

   </p>

  <p></p><!-- /.modal-content -->

 <p></p><!-- /.modal -->

<p></p>

 

 

<script>

 var page = 1;

 //当前页,默认等于1

 //调用load方法

 load();

 //把加载数据封装成一个方法

 loadfenye();

 //加载分页信息方法

 //给查询加点击事件

 $(&quot;#chaxun&quot;).click(function(){

  //重新加载

  //调用load方法

  load();

  //把加载数据封装成一个方法

  loadfenye();

  //加载分页信息方法

 })

 function loadfenye()

 {

  var s = "";

  //用于接收

  var name = $("#name").val();

  var xiao = 1;

//  最大页

  var da = 1;

//  最小页

  $.ajax({

 async:false,

//   做成同步

 url:"zys.php",

 data:{name:name},

 type:&quot;POST&quot;,

 dataType:"TEXT",

 success:function(data){

  da = data;

  //最大页数

   }

});

//加载上一页

  s += &quot;&lt;li class=&amp;#39;sy&amp;#39;&gt;&lt;a&gt;«&lt;/a&gt;&lt;/li&gt;&quot;;

//  加载分页列表

for(var i=page-4;i<page+5;i++)

{

 //i代表列表的页数

 if(i>=xiao && i<=da) {

  if (i == page) {

   s += &quot; &lt;li class=&amp;#39;active list&amp;#39;&gt;&lt;a&gt;&quot; + i + &quot;&lt;/a&gt;&lt;/li&gt;&quot;

  }

  else {

   s += " <li class=&#39;list&#39;><a>" + i + "</a></li>";

  }

 }

}

  //  加载下一页

  s += "<li class=&#39;xy&#39;><a>»</a></li>";

$("#fenye").html(s);

//给列表加上点击事件

  $(".list").click(function(){

   //改变当前页数

   //把点击的页数,扔给page(当前页)

   page = $(this).text();

//   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

  //上一页点击事件

  $(&quot;.sy&quot;).click(function(){

   //改变当前页

   if(page&gt;1)

   {

    //如果不是第一页

    page = parseInt(page) - 1;

   }

   //   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

  //下一页点击事件

  $(&quot;.xy&quot;).click(function(){

//   alert(da);

   if(page&lt;da)

   {

    //如果不是第一页

    page = parseInt(page) + 1;

   }

   //   page获取了当前页,重新加载以下方法

   //调用load方法

   load();

   //把加载数据封装成一个方法

   loadfenye();

   //加载分页信息方法

  })

 }

 function load()

 {

  var name = $("#name").val();

  $.ajax({

   url: "jiazai.php",

//  显示所有的数据不用写data

   data:{page:page,name:name},

   type:&quot;POST&quot;,

   dataType: "TEXT",

   success: function (data) {

    var str = "";

    var hang = data.split("|");

    //split拆分字符串

    for (var i = 0; i < hang.length; i++) {

     //通过循环取到每一行;拆分出列;

     var lie = hang[i].split("-");

     str = str +

      "<tr><td>"

      + lie[0] +

      "</td><td>"

      + lie[1] +

      "</td><td>" +

      "<button type=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情</button>" +

      //ids里面存上主键值

      "</td></tr>";

    }

    $("#td").html(str);

    //找到td把html代码扔进去

    addshanchu();

    addxiangqing();

   }

  });

 }

 //给查看详情加事件

 function addxiangqing()

 {

  $(".xq").click(function(){

   $(&#39;#myModal&#39;).modal(&#39;show&#39;)

   //打开模态框

   var ids = $(this).attr("ids");

   $.ajax({

    url:"xiangqing.php",

    data:{ids:ids},

    dataType:"TEXT",

    type:"POST",

     success:function(data){

     //拆分

      var lie = data.split("^");

//      var str = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]"</p>";

      //造字符串

      var str = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]+"</p>";

      $("#nr").html(str);

   }

   });

   //在模态框里面要显示的内容

  })

 }

 //把删除事件封装成方法:

 function addshanchu()

 {

  //给删除按钮加上事件

  $(".sc").click(function () {

   var ids = $(this).attr("ids");

   $.ajax({

    url: "shanchu.php",

    data: {ids: ids},

    dataType: "TEXT",

    type: "POST",

    success: function (d) {

     if (d.trim() == "ok") {

      alert("删除成功");

      //调用加载数据的方法

      load();

     }

     else {

      alert("删除失败");

     }

    }

   });

  })

 }

</script>

Salin selepas log masuk

查询总页数的页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!--?php

//查询总页数

include ("db.class.php");

$db = new db();

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

 $name = $_POST["name"];

 $tj = " name like &#39;%{$name}%&#39; ";

}

$sql = "select count(*) from min WHERE {$tj} ";

$zts = $db--->strquery($sql);

//总条数

echo ceil($zts/3);

//ceil向上取整

Salin selepas log masuk

加载分页信息的页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!--?php

include ("db.class.php");

$db = new db();

$page=$_POST["page"];

//去当前页page

$tj = " 1=1 ";

if(!empty($_POST["name"]))

{

 $name = $_POST["name"];

 $tj = " name like &#39;%{$name}%&#39; ";

}

$num = 3;

//每页显示几条

$tg = ($page-1)*3;//跳过几条

$sql = "select * from min where {$tj} limit {$tg},{$num}";

//limit:两个参数,第一个是跳过多少条,第二个是取多少条

$arr = $db--->Query($sql);

//遍历

$str="";

foreach ($arr as $v)

{

 $str = $str.implode("-",$v)."|";

 //用-把$v拼起来,拼出来是1-红2-蓝,用|分割,拼出来是1-红|2-蓝|

}

$str = substr($str,0,strlen($str)-1);

//截取字符串:从第0个开始,截取它的长度-1

//strlen获取字符串长度

echo $str;

Salin selepas log masuk

以上就是本篇文章的所有内容了,希望对大家学习有所帮助!

相关推荐:

json格式的Ajax提交示例代码

关于多个Ajax请求执行返回先后的问题示例探讨

AJax实现类似百度搜索栏的功能

Atas ialah kandungan terperinci Ajax写分页查询(实现不刷新页面). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan