zoukankan html css js c++ java

jquery 页面分页的实现


<!DOCTYPE html>
<html>
<head>
  <title>分页</title>
  <link rel="stylesheet" type="text/css" href="./css/page.css"></style>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
  <div class="">
      <div class="container" id="container" style="min-400px;min-height: 600px;">
      </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      // 创建一个分页的实例对象，利用对象中的方法进行分页
        var pageone = new PageInit('qA','../test3.json');
        var pageInit = pageone.createPage();

        $('#container').html(pageInit);
        pageone.init('../test3.json');
        pageone.operator();
    })
  </script>
</body>
</html>

index.js文件内容
    // 本例仅仅实现了页面跳转向后台传递数据，后台根据具体参数返回数据我们显示在页面上
    function PageInit(className,url){
        var publicVar={} ;
        var tempClassName = className;
        var tempUrl = url;
        var totalItem;
        publicVar.init = function(tempUrl){
            var parInit = {
                'page':1,
                'pagesize':10
            }
            this.reloadReplies(parInit);
        }
        publicVar.createPage = function(){
            var html = `
            <div class=${tempClassName}>
                <div class="data-area"></div>
                <div class="center">
                  <table  class="pageinitial" >
                      <tr>
                          <td>
                              <select name="pageItemNum" class ="rows" >
                                  <option value="10">10</option>
                                  <option value="15">15</option>
                                  <option value="25">25</option>
                                  <option value="50">50</option>
                              </select>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              <a href="javascript:void(0)" class="page-first">
                                   
                              </a>
                          </td>
                          <td>
                              <a href="javascript:void(0)" class="page-prev">
                                   
                              </a>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              page  <input class="page" value="1" style="30px;display:inline-block;text-align:center" readonly/>
                          </td>
                          <td>
                                of  <span class="page-total"></span>
                          </td>
                          <td class="division"> | </td>
                          <td>
                              <a  class="page-next" href="javascript:void(0)">
                                   
                              </a>
                          </td>
                          <td>
                              <a href="javascript:void(0)" class="page-last">
                                   
                              </a>
                          </td>
                      </tr>
                  </table>
                </div>
            </div>`
            return html;
        };
            // 绑定标签的点击函数
        publicVar.operator = function(tempUrl){
            var _self = this;
            $('.'+tempClassName+' .page-first').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                if(pageParams.page==maxPage){
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');

                }
                if(pageParams.page>1) {
                    pageParams.page = 1;
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    $('.'+tempClassName+' .page-prev').addClass('page-disable');
                    $('.'+tempClassName+' .page-first').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-prev');
                    _self.aDisabled('.'+tempClassName+' .page-first');
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-prev').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==maxPage){
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');
                }
                if(pageParams.page>1){
                    pageParams.page = pageParams.page-1;
                    if(pageParams.page==1){
                        $('.'+tempClassName+' .page-prev').addClass('page-disable');
                        $('.'+tempClassName+' .page-first').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-prev');
                        _self.aDisabled('.'+tempClassName+' .page-first');
                    }
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-next').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==1){
                    $('.'+tempClassName+' .page-prev').removeClass('page-disable');
                    $('.'+tempClassName+' .page-first').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-prev');
                    _self.aAbled('.'+tempClassName+' .page-first');
                }
                if(pageParams.page<maxPage){
                    pageParams.page = pageParams.page-1+2;
                    if(pageParams.page==maxPage){
                        $('.'+tempClassName+' .page-next').addClass('page-disable');
                        $('.'+tempClassName+' .page-last').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-next');
                        _self.aDisabled('.'+tempClassName+' .page-last');
                    }
                    $('.'+tempClassName+' .page').val(pageParams.page);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .page-last').click(function(e){
                e.preventDefault();
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                if(pageParams.page==1){
                    $('.'+tempClassName+' .page-prev').removeClass('page-disable');
                    $('.'+tempClassName+' .page-first').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-prev');
                    _self.aAbled('.'+tempClassName+' .page-first');
                }
                if(pageParams.page<maxPage){
                    maxPage = Math.ceil(totalItem/pageParams.pagesize);
                    pageParams.page = maxPage;
                    $('.'+tempClassName+' .page').val(maxPage);
                    $('.'+tempClassName+' .page-total').html(maxPage);
                    $('.'+tempClassName+' .page-next').addClass('page-disable');
                    $('.'+tempClassName+' .page-last').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-next');
                    _self.aDisabled('.'+tempClassName+' .page-last');
                    _self.pagefresh(pageParams,tempUrl);
                }
            });
            $('.'+tempClassName+' .rows').change(function(e){
                pageParams = _self.curPage(tempClassName);
                maxPage = Math.ceil(totalItem/pageParams.pagesize);
                $('.'+tempClassName+' .page-total').html(maxPage);
                $('.'+tempClassName+' .page').val('1');
                pageParams.page = $('.'+tempClassName+' .page').val();
                $('.'+tempClassName+' .page-prev').addClass('page-disable');
                $('.'+tempClassName+' .page-first').addClass('page-disable');
                _self.aDisabled('.'+tempClassName+' .page-prev');
                _self.aDisabled('.'+tempClassName+' .page-first');
                if(maxPage==1){
                    $('.'+tempClassName+' .page-next').addClass('page-disable');
                    $('.'+tempClassName+' .page-last').addClass('page-disable');
                    _self.aDisabled('.'+tempClassName+' .page-next');
                    _self.aDisabled('.'+tempClassName+' .page-last');
                }else{
                    $('.'+tempClassName+' .page-next').removeClass('page-disable');
                    $('.'+tempClassName+' .page-last').removeClass('page-disable');
                    _self.aAbled('.'+tempClassName+' .page-next');
                    _self.aAbled('.'+tempClassName+' .page-last');
                }
                _self.pagefresh(pageParams,tempUrl);
            });
        };
        //  设置标签是否可以进行点击
        publicVar.aDisabled = function(tempClassName) {
            $(tempClassName).attr('disabled', true);
            $(tempClassName).css('pointer-events', 'none');
        };
        publicVar.aAbled = function(tempClassName) {
            $(tempClassName).attr('disabled', false);
            $(tempClassName).css('pointer-events', 'auto');
        };
            // 获取当前页面信息页码页数和itemID
        publicVar.curPage = function (tempClassName){
            var rtn ={};
            rtn.pagesize = $('.'+tempClassName+' .rows').val();
            rtn.page = $('.'+tempClassName+' .page').val();
            return rtn;
        };
        // 得到参数后刷新，可以根据不同的tempClassName来局部刷新不同的列表
        publicVar.pagefresh = function (params,tempUrl){
            this.reloadReplies(params,tempUrl);
        };
        publicVar.reloadReplies = function(pars){
            _self = this;
            var htmlItem ='';
            var lenItem = '';
            $.ajax({
              url:tempUrl,
              params:pars,
              async: false,
                success:function(data){
                    totalItem = data.total;
                    if(totalItem==0){
                        maxPageItem = 1;
                    }else{
                        maxPageItem = Math.ceil(totalItem/pars.pagesize);
                    }
                    if(pars.page==1){
                        $('.'+tempClassName+' .page-prev').addClass('page-disable');
                        $('.'+tempClassName+' .page-first').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-prev');
                        _self.aDisabled('.'+tempClassName+' .page-first');
                    }
                    if(pars.page==maxPageItem){
                        $('.'+tempClassName+' .page-next').addClass('page-disable');
                        $('.'+tempClassName+' .page-last').addClass('page-disable');
                        _self.aDisabled('.'+tempClassName+' .page-next');
                        _self.aDisabled('.'+tempClassName+' .page-last');
                    }else{
                        $('.'+tempClassName+' .page-next').removeClass('page-disable');
                        $('.'+tempClassName+' .page-last').removeClass('page-disable');
                        _self.aAbled('.'+tempClassName+' .page-next');
                        _self.aAbled('.'+tempClassName+' .page-last');
                    }
                    $('.'+tempClassName+' .page-total').html(maxPageItem);
                    $('.'+tempClassName+' .page').val(pars.page);
                    lenItem = data.List.length;
                    if(lenItem>0){
                        // data.rows.postReplys = convertTime(data.rows.postReplys);
                        htmlItem = _self.fn(data.List);

                    }
                    $('.'+tempClassName+' .data-area').html(htmlItem);
                }
            });
        };
        // publicVar.createListItem = function(){

        // }
        publicVar.fn = function(item){
            var html='';
            for(var i=0;i<item.length;i++){
                html+= '
                  <div class="reply-item">
                      <div class="user-portrait">
                          <div class="portrait"><img src='+item[i].headIcon+'></div>
                      </div>
                      <div class="reply-detail">
                          <div class="reply-user">'+item[i].Name+'</div>
                          <div class="reply-content">'+item[i].reply_content+'</div>
                          <div class="reply-last">
                              <div class="reply-time">'+item[i].reply_time+'</div>
                              <div class="reply-delete"><div style="color: #0011ff;50px;cursor:pointer" onclick="openDeleteReplyDialog()">delete</div></div>
                          </div>
                      </div>
                  </div>
              '
            }
            return html;
        }
        return publicVar;
    }

查看全文

相关阅读:
如何免费在 arm 官网上下载合适的手册
 ARM Cortex-A系列处理器性能分类比较
 USB OTG有关协议
 fseek在 fopen 带有'a'模式下不起作用
 Zynq 7000的3种IO
多核处理器与MP架构
 Vim常用插件命令手册
 剑指 Offer 07
Leetcode 94
剑指offer 27

原文地址：https://www.cnblogs.com/xhliang/p/7852272.html