首頁 > web前端 > js教程 > jQuery+Ajax實作無刷新分頁

jQuery+Ajax實作無刷新分頁

高洛峰
發布: 2017-01-10 14:20:29
原創
1321 人瀏覽過

1、前台使用ajax無刷新分頁,主要需要生成分頁的工具條,這裡使用的是jquery.pagination.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

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

/**

  * This jQuery plugin displays pagination links inside the selected elements.

  *

  * @author Gabriel Birke (birke *at* d-scribe *dot* de)

  * @version 1.2

  * @param {int} maxentries Number of entries to paginate

  * @param {Object} opts Several options (see README for documentation)

 * @return {Object} jQuery Object

 */

 jQuery.fn.pagination = function(maxentries, opts){

   opts = jQuery.extend({

   items_per_page:10,

   num_display_entries:10,

   current_page:0,

   num_edge_entries:0,

   link_to:"#",

   prev_text:"Prev",

   next_text:"Next",

   ellipse_text:"...",

   prev_show_always:true,

   next_show_always:true,

   callback:function(){return false;}

  },opts||{});

  

   return this.each(function() {

   /**

   * 计算最大分页显示数目

    */

   function numPages() {

     return Math.ceil(maxentries/opts.items_per_page);

    

   /**

   * 极端分页的起始和结束点,这取决于current_page 和 num_display_entries.

   * @返回 {数组(Array)}

    */

  function getInterval() {

      var ne_half = Math.ceil(opts.num_display_entries/2);

     var np = numPages();

    var upper_limit = np-opts.num_display_entries;

       var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;

       var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);

       return [start,end];

    }

       

    /**

     * 分页链接事件处理函数

     * @参数 {int} page_id 为新页码

    */

     function pageSelected(page_id, evt){

     current_page = page_id;

      drawLinks();

      var continuePropagation = opts.callback(page_id, panel);

     if (!continuePropagation) {

        if (evt.stopPropagation) {

        evt.stopPropagation();

        }

        else {

         evt.cancelBubble = true;

        }

      }

      return continuePropagation;

   }

     

   /**

    * 此函数将分页链接插入到容器元素中

     */

    function drawLinks() {

      panel.empty();

      var interval = getInterval();

       var np = numPages();

      // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。

       var getClickHandler = function(page_id) {

        return function(evt){ return pageSelected(page_id,evt); }

      }

      //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)

      var appendItem = function(page_id, appendopts){

        page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值

        appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});

        if(page_id == current_page){

          var lnk = jQuery("<a href class=&#39;currentPage&#39;>" + (appendopts.text) + "</a>");

        }else{

           var lnk = jQuery("<a>"+(appendopts.text)+"</a>")

            .bind("click", getClickHandler(page_id))

            .attr(&#39;href&#39;, opts.link_to.replace(/__id__/,page_id));   

        }

         if (appendopts.classes) { lnk.addClass(appendopts.classes); }

         panel.append(lnk);

      }

       //产生描述

      panel.append("<span>共有 " + maxentries + " 条记录,当前第 <b>" + (current_page + 1) + "</b>/" + np + " 页</span>");

         

      // 产生"Previous"-链接

       if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){

         appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});

       }

     // 产生起始点

       if (interval[0] > 0 && opts.num_edge_entries > 0)

       {

         var end = Math.min(opts.num_edge_entries, interval[0]);

         for(var i=0; i<end; i++) {

           appendItem(i);

         }

         if(opts.num_edge_entries < interval[0] && opts.ellipse_text)

         {

           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);

        }

       }

       // 产生内部的些链接

       for(var i=interval[0]; i<interval[1]; i++) {

         appendItem(i);

       }

      // 产生结束点

       if (interval[1] < np && opts.num_edge_entries > 0)

      {

         if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)

        {

           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);

         }

         var begin = Math.max(np-opts.num_edge_entries, interval[1]);

         for(var i=begin; i<np; i++) {

           appendItem(i);

         }

          

       }

       // 产生 "Next"-链接

     if(opts.next_text && (current_page < np-1 || opts.next_show_always)){

         appendItem(current_page+1,{text:opts.next_text, classes:"next"});

       }

      }

       

     //从选项中提取current_page

     var current_page = opts.current_page;

     //创建一个显示条数和每页显示条数值

    maxentries = (!maxentries || maxentries < 0)?1:maxentries;

     opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;

     //存储DOM元素,以方便从所有的内部结构中获取

     var panel = jQuery(this);

     // 获得附加功能的元素

     this.selectPage = function(page_id){ pageSelected(page_id);}

     this.prevPage = function(){

       if (current_page > 0) {

         pageSelected(current_page - 1);

         return true;

       }

       else {

        return false;

      }

    }

    this.nextPage = function(){

      if(current_page < numPages()-1) {

        pageSelected(current_page+1);

       return true;

      }

      else {

        return false;

       }

    }

    // 所有初始化完成,绘制链接

   drawLinks();

     // 回调函数

     //opts.callback(current_page, this);

  });

}

登入後複製

代碼還是比較容易看明白的,可以根據自己需要修改,這裡使用的是自己的樣式

樣式代碼:

1

2

3

4

.pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;}

.pages b{ color:#e75f49;}

.pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;}

.pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}

登入後複製

顯示效果如下:

jQuery+Ajax實作無刷新分頁

原來的css樣式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.pagination a {

 text-decoration: none;

  border: 1px solid #AAE;

  color: #15B;

 }

 .pagination a, .pagination span {

  display: inline-block;

 padding: 0.1em 0.4em;

  margin-right: 5px;

 margin-bottom: 5px;

 }

   

.pagination .current {

 background: #26B;

 color: #fff;

 border: 1px solid #AAE;

 }

 .pagination .current.prev, .pagination .current.next{

  color:#999;

  border-color:#999;

  background:#fff;

 }

登入後複製

可以依照自己設計顯示

1

2

3

4

5

6

7

8

9

<div class="second-ul-ctn">

  <ul class="second-ul" id="ulProducts">

  </ul>

 <div class="pages">

  <input type="hidden" id="hideTotalCount" />

   <div id="Pagination" class="pagination">

   </div>

  </div>

 </div>

登入後複製

ulProducts中放的是要顯示的數據,產生的分頁的工具條是放在Pagination中的

2.2 javascript代碼

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

$(function () {

   searchMyme(0);

   pageInit();

   $("#btnSearch").on("click", function () {

    searchMyme(0);

    pageInit();

    return false;

   });

  });

  function searchMyme(page, pageination) {

   var month = $("#btnMonth").val();

   var obj = {

    Month: month,

    OpType: "getme",

    page: (page + 1)

    , rows: 10

   };

   var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx";

   $.get(url, obj, function (data) {

    $("#tbIncome").empty();

    var obj = JSON.parse(data);

    var total = obj.Total;

    $("#hideTotalCount").val(total);

    var arrHtml = [];

    $.each(obj.Rows, function (i, data) {

     arrHtml.push("<tr><td>" + (i + 1) + "</td>");

     arrHtml.push("<td>" + data.Account + "</td>");

     arrHtml.push("<td>" + data.Name + "</td>");

     arrHtml.push("<td>" + data.Month + "</td>");

     arrHtml.push("<td>" + data.IncomeAmount + "</td>");

     arrHtml.push("<td><a href=&#39;MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"&#39; class=&#39;a-blue&#39;>查看明细</a></td></tr>");

    });

    $("#tbIncome").append(arrHtml.join(&#39;&#39;));

   });

  };

  function pageInit() {

   var totalCount = $("#hideTotalCount").val();

   $("#Pagination").pagination(parseInt(totalCount), {

    items_per_page: 10,

    //current_page: 1,//当前选中的页面默认是0,表示第1页

    num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0,好像是尾部显示的个数

    num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10

    link_to: "javascript:void(0)",//分页的链接

    prev_text: "上一页",

    next_text: "下一页",

    prev_show_always: true,

    next_show_always: true,

    callback: searchMyIncome

   });

  }

登入後複製
searchMyme是獲取分頁的數據,將總數放到一個隱藏的控件中,總數分頁控件需要使用,這裡ajax呼叫需要同步執行,不然取不到回傳的總數pageInit() 就是初始化控件,這樣設定基本上就OK了。

以上就是本文的全部內容,希望對大家的學習有所幫助。

更多jQuery+Ajax實現無刷新分頁相關文章請關注PHP中文網!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
這個ajax無刷新分頁效果沒有源碼嗎?
來自於 1970-01-01 08:00:00
0
0
0
javascript - load方法 刷新滾動條錯亂
來自於 1970-01-01 08:00:00
0
0
0
angular.js - angularjs + ajax 資料不刷新,為什麼
來自於 1970-01-01 08:00:00
0
0
0
jquery - thinkphp3.2.3的驗證碼自動刷新
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板