首页 > web前端 > js教程 > Jquery简单分页实现方法_jquery

Jquery简单分页实现方法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 15:49:17
原创
1372 人浏览过

本文实例讲述了Jquery简单分页实现方法。分享给大家供大家参考。具体如下:

js代码:

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

function dolistpage(pagerow,pagenum,rowcount,pagecount){

 $("#pagemsg").html("每页显示"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页 共" +rowcount + "条");

 if (pagenum == 1) {

  $("#fpbtn").attr("disabled", true);

  $("#rpbtn").attr("disabled", true);

 }else {

  $("#fpbtn").removeAttr("disabled");

  $("#rpbtn").removeAttr("disabled");

 }

 if (pagenum == pagecount) {

  $("#npbtn").attr("disabled", true);

  $("#lpbtn").attr("disabled", true);

 }else {

  $("#npbtn").removeAttr("disabled");

  $("#lpbtn").removeAttr("disabled");

 }

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

  loadtpage(1);

 });

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

  loadtpage(pagenum - 1);

 });

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

  if ((pagenum + 1) >= pagecount)

   loadtpage(pagecount);

  else

   loadtpage(pagenum + 1);

 });

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

  loadtpage(pagecount);

 });

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

  var tzys = $("#gpinput").val();

  var re = /^[1-9]+[0-9]*$/;

  if (tzys == null || tzys == undefined || tzys == '') {

   alert("请输入跳转页数!");

   $("#gpinput").focus();

   return;

  }

  if (!re.test(tzys)) {

   alert("请输入正确跳转页数!");

   $("#gpinput").focus();

   return;

  }

  if (tzys > pagecount)

   tzys = pagecount;

  if (tzys <= 0)

   tzys = 1;

  loadtpage(tzys);

 });

 $("#gpinput").val(pagenum);

}

登录后复制

HTML代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<table>

 <tfoot>

  <tr>

   <td colspan="11">

    <span class="water-table-listbtn"></span>

    <span class="water-table-page">

     <span id="pagemsg" class="water-table-pagemsg">当前0/0页</span>

     <input type="button" id="fpbtn" value="首页"/>

     <input type="button" id="rpbtn" value="上页"/>

     <input type="button" id="npbtn" value="下页"/>

     <input type="button" id="lpbtn" value="尾页"/>

     <span id="pagemsg" class="water-table-pagemsg">跳转

     <input type="text" id="gpinput" size="3" value="0"/>页

     </span>

     <input type="button" id="gpbtn" value="跳转"/>

    </span>

   </td>

  </tr>

 </tfoot>

</table>

登录后复制

希望本文所述对大家的jquery程序设计有所帮助。

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
引入jQuery 文件
来自于 1970-01-01 08:00:00
0
0
0
jquery笔记哪里有下?
来自于 1970-01-01 08:00:00
0
0
0
javascript - vue+webpack怎么引入jquery
来自于 1970-01-01 08:00:00
0
0
0
php+jquery的问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板