> 웹 프론트엔드 > JS 튜토리얼 > js 페이지네이터에 대한 자세한 설명

js 페이지네이터에 대한 자세한 설명

小云云
풀어 주다: 2018-03-27 17:10:57
원래의
1958명이 탐색했습니다.

이 글에서는 주로 js paginator에 대한 자세한 설명을 공유하며, 모두에게 도움이 되기를 바라면서 먼저 효과를 살펴보겠습니다.

다음에 따라 다름: bootstrap 및 jquery

html 코드: class="pj_pager"에 의해 참조, pj_total은 총 항목 수를 초기화합니다

1

<p class="btn-group pj_pager" pj_total="10001"></p>

로그인 후 복사

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

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

/**

 * 分页器,依赖于bootstrap,jquery

 */

var pager = {

    init : function(r) {

        this.obj = $(".pj_pager");

        this.total = Number(this.obj.attr("pj_total"));

        this.rows = r != undefined ? r : 10;// Number(this.obj.find(.page-count).html())

        this.page = 1;

        this.initpagecount = 10;

        this.pages = parseInt(this.total / pager.rows)

                + (pager.total % pager.rows > 0 ? 1 : 0);

        this.maxpages = this.pages > this.initpagecount ? this.initpagecount

                : this.pages;

        this.outnumber = this.pages > this.initpagecount ? true : false;

        this.start = 1;

        this.end = this.start + (this.maxpages - 1);

        this.html();

    },

    next : function() {

        this.obj.find(".pj_next").click(function() {

            if (pager.pages > pager.page) {

                pager.page++;

                pager.html();

            }

        });

    },

    prov : function() {

        this.obj.find(".pj_prov").click(function() {

            if (pager.page > 1) {

                pager.page--;

                pager.html();

            }

        });

 

    },

    first : function() {

        this.obj.find(".first").click(function() {

            if (pager.page != 1) {

                pager.page = 1;

                pager.html();

            }

        });

    },

    last : function() {

        this.obj.find(".last").click(function() {

            if (pager.page != pager.pages) {

                pager.page = pager.pages;

                pager.html();

            }

        });

    },

    jump : function() {

        this.obj.find(".jump").click(function() {

            var p = $(this).prev("input").val();

            if (p != &#39;&#39; && Number(p) <= pager.pages) {

                pager.page = Number(p);

                pager.html();

            }

        });

    },

    setOutnumber : function() {

        if (this.pages > this.initpagecount) {

            if (this.end < this.page || this.start > this.page) {

                this.start = parseInt((this.page - 1) / this.initpagecount)

                        * this.initpagecount + 1;

                this.end = this.start + this.initpagecount - 1;

                if (this.pages - this.start < this.initpagecount) {

                    this.outnumber = false;

                    this.end = this.start + pager.total % pager.rows - 1;

                } else {

                    this.outnumber = true;

                }

            }

        }

    },

    selectRows : function() {

        $(".dropdown-menu li").click(

                function() {

                    // pager.rows = Number($(this).find("a").html());

                    // pager.page = 1;

                    pager.init(Number($(this).find("a").html()));

                    $(this).parent("ul").prev("button").children("em").html(

                            $(this).find("a").html());

                });

    },

    html : function() {

 

        this.setOutnumber();

 

        var html = &#39;&#39;;

        html += &#39;<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><em class="page-count">&#39;

                + this.rows + &#39;</em> <span class="caret"></span></button>&#39;;

        html += &#39;<ul class="dropdown-menu" style="min-width: auto" role="menu">&#39;;

        html += &#39;<li><a href="#">10</a></li><li><a href="#">20</a></li><li><a href="#">30</a></li><li><a href="#">40</a></li><li><a href="#">50</a></li><li><a href="#">100</a></li>&#39;;

        html += &#39;</ul>&#39;;

        html += &#39;<button type="button" class="btn btn-default first">首页</button>&#39;;

        html += &#39;<button type="button" class="btn btn-default pj_prov"><<</button>&#39;;

        if (this.pages > 0) {

            for (var i = this.start; i <= this.end; i++) {

                var cls = (i == this.page ? &#39;btn-success&#39; : &#39;btn-default&#39;);

                html += &#39;<button type="button" class="btn &#39; + cls + &#39;">&#39; + i

                        + &#39;</button>&#39;;

            }

            if (this.outnumber) {

                html += &#39;<button type="button" class="btn btn-default">...</button>&#39;;

            }

        }

        html += &#39;<button type="button" class="btn btn-default pj_next">>></button>&#39;;

        html += &#39;<button type="button" class="btn btn-default last">尾页</button>&#39;;

        html += &#39;<input type="text"  style="width: 50px;display:inherit" class="btn form-control" placeholder="页数">&#39;;

        html += &#39;<button type="button" class="btn btn-default jump">跳转</button>&#39;;

        html += &#39;<span> </span><span>&#39; + this.total

                + &#39;</span><span>条</span>&#39;;

        html += &#39;<span> 共</span><span>&#39; + this.pages

                + &#39;</span><span>页</span>&#39;;

        this.obj.html(html);

        this.next();

        this.prov();

        this.first();

        this.last();

        this.jump();

        this.selectRows();

    }

 

}

 

$(function() {

    pager.init();

})

로그인 후 복사

위 내용은 js 페이지네이터에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿