Home > Web Front-end > JS Tutorial > Paging plug-in pagenav_jquery implemented in native javascript

Paging plug-in pagenav_jquery implemented in native javascript

WBOY
Release: 2016-05-16 16:38:26
Original
1917 people have browsed it

This is a paging plug-in pagenav implemented with native javascript. The page number display jquery plug-in only needs to exist #pageNav, and the page number will be displayed in it. When calling, you can rewrite the go method as needed. (The jquery dependency has been removed. ). . . .

The plug-in code is as follows:

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

/*

 **************************

 author:Keel (keel.sike@gmail.com)

 **************************

 

 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码.

 调用时可根据需要先重写go方法.(已去除jquery依赖)

 

 **************************

 示例(注意:页面中放置id为pageNav的html对象):

 

 //转到页码时触发的自定义方法,p为当前页码,pn为总页数

 pageNav.fn = function(p,pn){

 alert(p+","+pn);

 };

 //初始跳到第3页,共33页

 pageNav.go(3,33);

 

 */

var pageNav = pageNav || {};

pageNav.fn = null;

//p为当前页码,pn为总页数

pageNav.nav = function(p, pn) {

  //只有一页,直接显示1

  if (pn <= 1) {

    this.p = 1;

    this.pn = 1;

    return this.pHtml2(1);

  }

  if (pn < p) {

    p = pn;

  };

  var re = "";

  //第一页

  if (p <= 1) {

    p = 1;

  } else {

    //非第一页

    re += this.pHtml(p - 1, pn, "上一页");

    //总是显示第一页页码

    re += this.pHtml(1, pn, "1");

  }

  //校正页码

  this.p = p;

  this.pn = pn;

 

  //开始页码

  var start = 2;

  var end = (pn < 9) &#63; pn: 9;

  //是否显示前置省略号,即大于10的开始页码

  if (p >= 7) {

    re += "...";

    start = p - 4;

    var e = p + 4;

    end = (pn < e) &#63; pn: e;

  }

  for (var i = start; i < p; i++) {

    re += this.pHtml(i, pn);

  };

  re += this.pHtml2(p);

  for (var i = p + 1; i <= end; i++) {

    re += this.pHtml(i, pn);

  };

  if (end < pn) {

    re += "...";

    //显示最后一页页码,如不需要则去掉下面这一句

    re += this.pHtml(pn, pn);

  };

  if (p < pn) {

    re += this.pHtml(p + 1, pn, "下一页");

  };

  return re;

};

//显示非当前页

pageNav.pHtml = function(pageNo, pn, showPageNo) {

  showPageNo = showPageNo || pageNo;

  var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> ";

  return H;

 

};

//显示当前页

pageNav.pHtml2 = function(pageNo) {

  var H = " <span class='cPageNum'>" + pageNo + "</span> ";

  return H;

};

//输出页码,可根据需要重写此方法

pageNav.go = function(p, pn) {

  //$("#pageNav").html(this.nav(p,pn)); //如果使用jQuery可用此句

  document.getElementById("pageNav").innerHTML = this.nav(p, pn);

  if (this.fn != null) {

    this.fn(this.p, this.pn);

  };

};

Copy after login

The effect is as follows:

Demo address: http://demo.jb51.net/js/2014/pagenav/ If you need it, you can pick up the code yourself. It’s very simple, so I won’t provide direct downloading

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template