https://v.changsha.cn/front_js/icms_pager/icms_multiplePager.js

1(function ($) {
2    var iPager = function (opts) {
3
4        if (!(this instanceof iPager)) return new iPager(opts);
5
6        var pp = this;
7
8        /*
9         * 默认参数
10         * all_count：总条数
11         * current_index：数据的序号,从1开始
12         * all_page：总页码
13         * site_id：站点id
14         * channel_id：频道id
15         * hasChild：是否需要子节点稿件 0-不需要，1-需要
16         * page_no：页码，接口取值从0开始
17         * page_size：每页条数
18         * state：稿件状态，默认30（已发）
19         * pager_mode：0-不需要页码按钮,1-需要页码按钮，第2页才开始从接口获取数据；2-需要页码按钮，第1页开始从接口获取数据；3-点击加载更多模式;4-点击加载更多模式,第1页从接口获取
20         * button_container_id：分页按钮容器id
21         * list_container_id：分页数据容器id，默认为PageList
22         * template_container_id：模板容器Id，默认为PageTemplate
23         * isClear：是否清空分页数据容器，默认为true清空
24         * server：接口域名
25         * apiUrl：接口地址
26         * apiFun：接口参数获取方法
27         * pb_first_text：首页按钮文字
28         * pb_pre_text：上一页按钮文字
29         * pb_next_text：下一页按钮文字
30         * pb_last_text：尾页按钮文字
31         * pb_more_text：加载更多按钮文字
32         * pb_confirm_text：跳转页数按钮文字
33         * pb_no_more_text：没有更多提示文字
34         * success_call_back：回调函数名
35         * only_client：是否只调用app稿件
36         * skip_index：分页时跳过的条数
37         * search_key_json：模糊查询语句
38         */
39        pp.options = {
40            all_count: -1,
41            current_index: 0,
42            all_page: 0,
43            site_id: 0,
44            channel_id: 0,
45            hasChild: 0,
46            page_no: 0,
47            page_size: 10,
48            state: 30,
49            pager_mode: 1,
50            button_container_id: '',
51            list_container_id: 'PageList',
52            template_container_id: 'PageTemplate',
53            isClear: true,
54            server: 'https://icms3api.changsha.cn',
55            apiUrl: '/default.php?secu=public&mod=interface&a=news_list',
56            apiFun: function () { return getApiData() },
57            pb_first_text: '|<',
58            pb_pre_text: '<<',
59            pb_next_text: '>>',
60            pb_last_text: '>|',
61            pb_more_text: '加载更多',
62            pb_confirm_text: '转到',
63            pb_no_more_text: '没有更多了',
64            success_call_back: '',
65            only_client: 0,
66            skip_index: 0,
67            search_key_json: '',
68        }
69
70        //跳转页码
71        pp.goToPage = function (obj, page_no) {
72            if ($(obj).hasClass('disabled_button') || $(obj).hasClass('current_page')) {
73                return false;
74            }
75            pp.options.page_no = page_no;
76            if (pp.options.page_no == 0 || (pp.options.page_no + 1) == pp.options.all_page) {
77                getPageListData(false, true);
78            } else {
79                getPageListData();
80            }
81        }
82        //跳转上一页码
83        pp.goToPrePage = function (obj) {
84            if ($(obj).hasClass('disabled_button')) {
85                return false;
86            }
87            pp.options.page_no--;
88            getPageListData();
89        }
90        //跳转下一页码
91        pp.goToNextPage = function (obj) {
92            if ($(obj).hasClass('disabled_button')) {
93                return false;
94            }
95            pp.options.page_no++;
96            getPageListData();
97        }
98        //跳转指定页码
99        pp.jumpToPage = function () {
100            var no = $('#' + pp.options.button_container_id + ' .jump_page').val() - 1;
101            if (no < 0 || no > (pp.options.all_page - 1)) {
102                $('#' + pp.options.button_container_id + ' .pb_confirm').attr('href', 'javascript:void(0);');
103                alert('请输入1~' + pp.options.all_page + '之间的页数');
104                return false;
105            }
106            $('#' + pp.options.button_container_id + ' .pb_confirm').attr('href', '#');
107            pp.options.page_no = no;
108            getPageListData();
109        }
110        //加载更多
111        pp.getMore = function () {
112            pp.options.page_no++;
113            getPageListData();
114        }
115
116        //初始化插件参数
117        pp.options = $.extend(pp.options, opts || {});
118
119        getPageListData(true, false);
120
121        //生成接口参数，为了让插件适应不同的接口，接口参数可以通过此方法改变
122        function getApiData() {
123            return {
124                'siteid': pp.options.site_id,
125                'channel_id': pp.options.channel_id,
126                'state': pp.options.state,
127                'p': pp.options.page_no,
128                'ps': pp.options.page_size,
129                'is_encrypt': 0,
130                'only_client': pp.options.only_client,
131                'haschild': pp.options.hasChild,
132                'skip_index': pp.options.skip_index,
133                'search_key_json': pp.options.search_key_json
134            }
135        }
136
137        /*
138         * 调用分页数据接口
139         * firstFlag:初次加载标志
140         * mMflag:跳转首页或尾页标志
141         */
142        function getPageListData(firstFlag, mMflag) {
143            var apiurl = "";
144            if (pp.options.apiUrl.indexOf("https://") == 0 || pp.options.apiUrl.indexOf("https://") == 0) {
145                apiurl=pp.options.apiUrl;
146            } else {
147                apiurl = pp.options.server + pp.options.apiUrl;
148            }
149            $.ajax({

150                url: apiurl,
151                data: pp.options.apiFun(),
152                type: "get",
153                dataType: "json",
154                success: function (data) {
155                    /*
156                     * data数据json
157                     * result:分页数据
158                     * count:总条数
159                     */
160                    //总条数为undefined、不是数字或-1时，从接口中取值
161                    if (pp.options.all_count == "undefined" || isNaN(pp.options.all_count) || pp.options.all_count == -1) {
162                        pp.options.all_count = data.count - pp.options.skip_index;
163                    }
164                    if (pp.options.pager_mode == 0) {//0-不需要页码按钮；
165                        setPageListData(data);
166                    } else if (pp.options.pager_mode == 1) {//1-需要页码按钮，第2页才开始从接口获取数据；
167                        pp.options.all_page = Math.ceil(pp.options.all_count / pp.options.page_size);
168                        setPageButton(firstFlag, mMflag);
169                        if (!firstFlag) {
170                            setPageListData(data);
171                        }
172                        // pp.options.pager_mode = 0;//第一页是静态页面，不需要从接口获取数据，只加上按钮后，改掉标志位，第二页开始从接口获取数据
173                    } else if (pp.options.pager_mode == 2) {//2-需要页码按钮，第1页开始从接口获取数据
174                        setPageListData(data);
175                        pp.options.all_page = Math.ceil(pp.options.all_count / pp.options.page_size);
176                        setPageButton(firstFlag, mMflag);
177                        // pp.options.pager_mode = 0;
178                    } else if (pp.options.pager_mode == 3) {//3-点击加载更多模式
179                        pp.options.isClear = false;
180                        pp.options.all_page = Math.ceil(pp.options.all_count / pp.options.page_size);
181                        setPageButton(firstFlag, mMflag);
182                        pp.options.pager_mode = 0;
183                    } else if (pp.options.pager_mode == 4) {//4-点击加载更多模式,第1页从接口获取
184                        pp.options.isClear = false;
185                        pp.options.all_page = Math.ceil(pp.options.all_count / pp.options.page_size);
186                        setPageListData(data);
187                        setPageButton(firstFlag, mMflag);
188                        pp.options.pager_mode = 0;
189                    }
190                },
191                error: function () {
192                }
193            });
194        }
195
196        /*
197         * 插入分页数据
198         * data：分页数据
199         */
200        function setPageListData(data) {
201            if (pp.options.isClear) {
202                $('#' + pp.options.list_container_id).empty();
203            }
204            if (data.result) {
205                $.each(data.result, function (i, documentColumns) {
206                    var temp = $('#' + pp.options.template_container_id).html();
207                    var reg = new RegExp("#\/script", "ig");
208                    temp = temp.replace(reg, '</script');
209                    pp.options.current_index++;
210                    reg = new RegExp("{f_no}", "g");
211                    temp = temp.replace(reg, pp.options.current_index);
212                    $.each(documentColumns, function (key, that) {
213                        var reg = new RegExp("{(f_|c_)" + key + "}", "ig");//忽略大小写、全局，兼容c_形式的标签
214                        if (that == 'undefined' || that == null) {
215                            temp = temp.replace(reg, '');
216                        } else {
217                            temp = temp.replace(reg, that);
218                        }
219                    })
220                    $('#' + pp.options.list_container_id).append(temp);
221                });
222            }
223            setPageButtonAttr();
224            if (pp.options.success_call_back) {
225                eval(pp.options.success_call_back + '(pp)');
226            }
227        }
228
229        /*
230         * 设置页码按钮
231         * firstFlag:初次加载标志
232         * mMflag:跳转首页或尾页标志
233         */
234        function setPageButton(firstFlag, mMflag) {
235            if (pp.options.pager_mode != 3 && pp.options.pager_mode != 4) {
236                /**
237                 *页码按钮模式下(模式1、模式2)，只显示8个页码按钮，当前页是4的倍数时，重新设置页码按钮，下例点第8页

238                 * 首页 上一页 6 7 8 9 10 11 12 13 14 15 下一页 尾页
239                 */
240                if (firstFlag || mMflag || (pp.options.all_page > pp.options.page_no && (pp.options.page_no + 1) % 4 == 0)) {
241                    $('#' + pp.options.button_container_id).empty();
242                    $('#' + pp.options.button_container_id).append("<div class='page_button_area'></div>");//按钮区域
243                    $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='pb_first'>" + pp.options.pb_first_text + "</a>");//首页页按钮
244                    $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='pb_pre'>" + pp.options.pb_pre_text + "</a>");//上一页按钮
245                    if (pp.options.all_page > 8) {
246                        if ((pp.options.page_no + 1) >= 4) {
247                            var minPage = (pp.options.page_no - 4) > 0 ? (pp.options.page_no - 4) : 0;
248                            for (var i = minPage; i <= pp.options.page_no; i++) {
249                                $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='page_no_button pb_" + i + "'>" + (i + 1) + "</a>");
250                            }
251                            var maxPage = pp.options.all_page > (pp.options.page_no + 5) ? (pp.options.page_no + 5) : pp.options.all_page;
252                            for (var i = pp.options.page_no + 1; i < maxPage; i++) {
253                                $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='page_no_button pb_" + i + "'>" + (i + 1) + "</a>");
254                            }
255                        } else {
256                            for (var i = pp.options.page_no; i < (pp.options.page_no + 8); i++) {
257                                $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='page_no_button pb_" + i + "'>" + (i + 1) + "</a>");
258                            }
259                        }
260                    } else {
261                        //总页码小于需要分段的数目，则加载全部页码按钮
262                        for (var i = 0; i < pp.options.all_page; i++) {
263                            $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='page_no_button pb_" + i + "'>" + (i + 1) + "</a>");
264                        }
265                    }
266                    $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='pb_next'>" + pp.options.pb_next_text + "</a>");//下一页按钮
267                    $('#' + pp.options.button_container_id + ' .page_button_area').append("<a class='pb_last'>" + pp.options.pb_last_text + "</a>");//尾页按钮
268                    $('#' + pp.options.button_container_id + ' .page_button_area').append("<span>&nbsp;</span><input class='jump_page' type='number'/><a class='pb_confirm'>" + pp.options.pb_confirm_text + "</a>");
269                    $('#' + pp.options.button_container_id).append("<div class='page_info_area'>共" + pp.options.all_page + "页</div>");//信息区域
270                }
271            } else {
272                $('#' + pp.options.button_container_id).empty();
273                $('#' + pp.options.button_container_id).append("<div class='more_page_button_area'></div>");//按钮区域
274                $('#' + pp.options.button_container_id + ' .more_page_button_area').append("<a class='pb_more'>" + pp.options.pb_more_text + "</a>");//加载更多
275            }
276            bindButtonEvent();
277            setPageButtonAttr();
278        }
279
280        //绑定页码按钮的事件
281        //因为每次调用接口都会绑定事件，导致事件重复绑定了，所以每次绑定之前先解绑
282        function bindButtonEvent() {
283            //首页
284            $('#' + pp.options.button_container_id + ' .pb_first').unbind('click').bind('click', function (event) {
285                event.preventDefault();
286                pp.goToPage(this, 0);
287            });
288            //上一页
289            $('#' + pp.options.button_container_id + ' .pb_pre').unbind('click').bind('click', function (event) {
290                event.preventDefault();
291                pp.goToPrePage(this);
292            });
293            //数字页码
294            $('#' + pp.options.button_container_id + ' .page_no_button').unbind('click').bind('click', function (event) {
295                event.preventDefault();
296                var index = parseInt($(this).text()) - 1;
297                pp.goToPage(this, index);
298            });
299            //下一页
300            $('#' + pp.options.button_container_id + ' .pb_next').unbind('click').bind('click', function (event) {
301                event.preventDefault();
302                pp.goToNextPage(this);
303            });
304            //尾页
305            $('#' + pp.options.button_container_id + ' .pb_last').unbind('click').bind('click', function (event) {
306                event.preventDefault();
307                pp.goToPage(this, pp.options.all_page - 1);
308            });
309            //跳转
310            $('#' + pp.options.button_container_id + ' .pb_confirm').unbind('click').bind('click', function (event) {
311                event.preventDefault();
312                pp.jumpToPage();
313            });
314            //加载更多
315            $('#' + pp.options.button_container_id + ' .pb_more').unbind('click').bind('click', function (event) {
316                event.preventDefault();
317                pp.getMore();
318            });
319        }
320
321        //设置页码按钮属性
322        function setPageButtonAttr() {
323            $('#' + pp.options.button_container_id + ' .page_button_area a').removeClass('disabled_button');//移除所有不可点击class
324            //第一页时，首页和上一页不可点击
325            if (pp.options.page_no == 0) {
326                $('#' + pp.options.button_container_id + ' .pb_first').addClass('disabled_button');
327                $('#' + pp.options.button_container_id + ' .pb_pre').addClass('disabled_button');
328            }
329            //最后一页时，尾页、下一页和加载更多按钮不可点击
330            if (pp.options.all_page == 0 || pp.options.page_no == (pp.options.all_page - 1)) {
331                $('#' + pp.options.button_container_id + ' .pb_next').addClass('disabled_button');
332                $('#' + pp.options.button_container_id + ' .pb_last').addClass('disabled_button');
333                //加载更多模式，更多按钮设置
334                $('#' + pp.options.button_container_id + ' .pb_more').addClass('disabled_button');
335                $('#' + pp.options.button_container_id + ' .pb_more').text(pp.options.pb_no_more_text);
336            }
337            $('#' + pp.options.button_container_id + ' .page_no_button').removeClass('current_page');//加上当前页class
338            $('#' + pp.options.button_container_id + ' .pb_' + pp.options.page_no).addClass('current_page');//加上当前页class
339            //给页码按钮加上href='#'，仿页面跳转效果
340            $('#' + pp.options.button_container_id + ' .page_button_area a').attr('href', 'javascript:void(0);');
341            $('#' + pp.options.button_container_id + ' .page_button_area a').not('.disabled_button,.current_page,.pb_confirm,.pb_more').attr('href', '#');
342        }
343
344        return pp;
345    };
346    window.iPager = iPager;
347})(window.jQuery || $);
348
349/*
350 IE下ajax跨域请求不执行，需要在head中加上meta，指定浏览器内核
351 <meta name="renderer"content="webkit">
352 <meta http-equiv="X-UA-Compatible" content="IE=10">
353 */