ホームページ > ウェブフロントエンド > jsチュートリアル > jsページネータの詳しい説明

jsページネータの詳しい説明

小云云
リリース: 2018-03-27 17:10:57
オリジナル
1957 人が閲覧しました

この記事では主に js paginator の詳細な説明を共有します。まず、皆さんのお役に立てればと思い、その効果を見てみましょう。

依存: ブートストラップと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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート