> 웹 프론트엔드 > JS 튜토리얼 > jquery_jquery를 기반으로 페이징 플러그인 작성

jquery_jquery를 기반으로 페이징 플러그인 작성

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 15:11:46
원래의
1315명이 탐색했습니다.

JQuery를 확장하는 것은 쉽습니다. 간단한 페이징 플러그인을 작성해 보세요. 코드의 양은 많지 않습니다.

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

$.fn.mypagination = function(totalProperty,opts){

  opts = $.extend({

    perPage:10,

   

    callback:function(){

    }

  },opts||{});

      

  return this.each(function(){

    function numPages(){

      return Math.ceil(totalProperty/opts.perPage);

    }

   

      

    function selectPage(page){

      return function(){

        currPage = page;

        if (page<0) currPage = 0;

        if (page>=numPages()) currPage = numPages()-1;

        render();

   

        $('img.page-wait',panel).attr('src','images/wait.gif');

        opts.callback(currPage+1);

        $('img.page-wait',panel).attr('src','images/nowait.gif');

      }

    }

      

    function render(){

   

      var html = '<table><tbody><tr>' 

        +'<td><a href="#"><img class="page-first"></a></td>'

        +'<td><a href="#"><img class="page-prev"></a></td>'

        +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'

        +'<td><a href="#"><img class="page-next"></a></td>'

        +'<td><a href="#"><img class="page-last"></a></td>'

        +'<td><img src="images/nowait.gif" class="page-wait"></td>'

        +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'

        +'</tr></tbody></table>';

      var imgFirst = 'images/page-first-disabled.gif';

      var imgPrev = 'images/page-prev-disabled.gif';

      var imgNext = 'images/page-next-disabled.gif';

      var imgLast = 'images/page-last-disabled.gif';

      if (currPage > 0){

        imgFirst = 'images/page-first.gif';

        imgPrev = 'images/page-prev.gif';

      }

      if (currPage < numPages()-1){

        imgNext = 'images/page-next.gif';

        imgLast = 'images/page-last.gif';

      }

      panel.empty();

      panel.append(html);

      $('img.page-first',panel)

        .bind('click',selectPage(0))

        .attr('src',imgFirst); 

      $('img.page-prev',panel)

        .bind('click',selectPage(currPage-1))

        .attr('src',imgPrev);  

      $('img.page-next',panel)

        .bind('click',selectPage(currPage+1))

        .attr('src',imgNext);  

      $('img.page-last',panel)

        .bind('click',selectPage(numPages()-1))

        .attr('src',imgLast);

      $('input.page-num',panel)

        .val(currPage+1)

        .change(function(){

          selectPage($(this).val()-1)();

        });

    }

      

    var currPage = 0;

    var panel = $(this);

    render();

   

  });

}

로그인 후 복사

아래에서 테스트해 보세요.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<head>

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

  <link rel="stylesheet" href="mypagination.css"/>

  <script type="text/javascript" src="jquery-1.2.6.js"></script>

  <script type="text/javascript" src="jquery.mypagination.js"></script>

  <script>

    $(document).ready(function(){

      $('#mypage').mypagination(10112,{

        callback:function(page){

          alert(page);

        }

      });

    });

  </script>

</head>

<div id="mypage" class="mypagination"></div>

로그인 후 복사

작동 효과도는 다음과 같습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

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