找回密码
当前位置：前端开发者 > JavaScript > 正文

动态数据分页和静态数据分页-插件

2018-11-25 分类：JavaScript 阅读(664) 评论(0)
阿里前端开发文档规范
前端开发文档缩进规范
前端开发需求文档
前端开发文档看不懂
web前端开发 需求文档
前端开发架构分析文档

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>分页插件</title>
        <style type=”text/css”>
            * {
                text-align: center;
                color: #333;
            }
            #content,
            #pagination {
                width: 400px;
            }
            #content table {
                width: 100%;
                border: 1px solid #ccc;
                margin-bottom: 10px;
                border-collapse: collapse;
            }
            #content table th {
                height: 43px;
                background-color: #f6f8f8;
            }
            #content table tr {
                height: 43px;
            }
            #content table td {
                font-size: 14px;
                padding: 10px;
                max-width: 320px;
                min-width: 50px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: nowrap;
                text-align: center;
                border: 1px solid #e3eaef;
                border-right: none;
                empty-cells: show;
                font-family: ‘微软雅黑 Regular’, ‘微软雅黑’;
            }
            #pagination a {
                display: inline-block;
                border: 1px solid #ccc;
                height: 20px;
                line-height: 20px;
                margin: 0 5px;
                padding: 2px 5px;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            #pagination input {
                display: inline-block;
                width: 50px;
                height: 20px;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <div id=”content”></div>
        <div id=”pagination”></div>
        <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
        <script type=”text/javascript”>
            ;(function($, window, document, undefined) {
                var pluginName = ‘pagination’
                // 总页数和数据总条数
                var allPage = 0,
                    totalData = 0,
                    c //ajax字符串
                var defaults = {
                    _url: ”, //ajax请求地址
                    _type: ‘get’, //ajax请求方式
                    _ajaxData: ”, //ajax参数
                    _dataType: ‘json’, //ajax请求的数据类型
                    _success: function(data) {}, //用户自定义函数生成表格
                    _error: function(data) {}, //ajax失败后的回调
                    Wrapper: ‘#content’, // 内容盒子
                    pageBar: ‘#pagination’, // 分页条位置
                    activePage: 1, // 当前激活的页码
                    onePageData: 3, // 每页显示的条数
                    data: null, // 分页数据
                }
                function Plugin(element, options) {
                    this.element = element
                    this.options = $.extend({}, defaults, options)
                    this._defaults = defaults
                    this._name = pluginName
                    this.allpage()
                    this.init()
                }
                // 计算页码
                Plugin.prototype.allpage = function() {
                    var self = this,
                        result
                    var _p = self.options
                    for (var i in self.options.data) {
                        totalData++
                    }
                    allPage = Math.ceil(totalData / _p.onePageData)
                }
                // 切割分页数据
                Plugin.prototype.init = function() {
                    var self = this,
                        result
                    var _p = self.options
                    if (_p._url != ”) {
                        c =
                            _p._ajaxData +
                            ‘&page=’ +
                            _p.activePage +
                            ‘&page_size=’ +
                            _p.onePageData
                        this.ajaxFn()
                    } else {
                        if (allPage > 1) {
                            if (_p.activePage === allPage) {
                                result = _p.data.slice(
                                    (_p.activePage – 1) * _p.onePageData,
                                )
                            }
                            result = _p.data.slice(
                                (_p.activePage – 1) * _p.onePageData,
                                _p.activePage * _p.onePageData,
                            )
                        } else {
                            result = _p.data
                        }
                        this.getContent(result)
                        this.getPageBar()
                        this.pageTo()
                    }
                }
                // 生成分页条
                Plugin.prototype.getPageBar = function(page) {
                    var self = this
                    var _p = self.options
                    $(_p.pageBar)
                        .find(‘.pageContent’)
                        .remove()
                    var _html =
                        ‘<div class=”pageContent”><a class=”pageBefore”>前一页</a>’ +
                        ‘<span>前往</span>’ +
                        ‘<input class=”pageTo” value=”‘ +
                        _p.activePage +
                        ‘”>’ +
                        ‘<span>页</span>’ +
                        ‘<a class=”pageNext”>后一页</a>’
                    if (_p._url != ”) {
                        allPage = page
                    }
                    _html += ‘<span>共’ + allPage + ‘页</span>’ + ‘</div>’
                    $(_p.pageBar).append(_html)
                }
                // 将内容追加入页面
                Plugin.prototype.getContent = function(result) {
                    var self = this
                    var _p = self.options
                    _p._success(result)
                    $(_p.pageBar)
                        .find(‘.pageTo’)
                        .val(_p.activePage)
                }
                // 后台分页
                Plugin.prototype.ajaxFn = function(res) {
                    var totalPage = allPage
                    var self = this
                    var _p = self.options
                    $.ajax({
                        url: _p._url,
                        type: _p._type,
                        data: c,
                        dataType: _p._dataType,
                        success: function(data) {
                            _p._success(data)
                            // 由后台返回所有数据的条数或页数并赋值给totalPage去改变allPage
                            totalPage = data.totalPage
                            $(_p.pageBar)
                                .find(‘.pageTo’)
                                .val(_p.activePage)
                            self.getPageBar(totalPage)
                            self.pageTo()
                        },
                        error: function(data) {
                            _p._error(data)
                        },
                    })
                }
                // 跳转到指定页面
                Plugin.prototype.pageTo = function() {
                    var self = this
                    var _p = self.options
                    // 前一页
                    $(_p.pageBar)
                        .find(‘.pageBefore’)
                        .on(‘click’, function() {
                            if (_p.activePage === 1) {
                                return
                            } else {
                                _p.activePage–
                                self.init()
                            }
                        })
                    // 后一页
                    $(_p.pageBar)
                        .find(‘.pageNext’)
                        .on(‘click’, function() {
                            if (_p.activePage >= allPage) {
                                return
                            } else {
                                _p.activePage++
                                self.init()
                            }
                        })
                    // 按enter键前往指定页
                    $(document).keypress(function(event) {
                        var keynum = event.keyCode ? event.keyCode : event.which
                        if (keynum == ’13’) {
                            var value = parseInt(
                                $(_p.pageBar)
                                    .find(‘.pageTo’)
                                    .val(),
                                10,
                            )
                            if (
                                value !== _p.activePage &&
                                value >= 1 &&
                                value <= allPage
                            ) {
                                _p.activePage = value
                                self.init()
                            } else {
                                return
                            }
                        }
                    })
                }
                // 这部分就是套路，直接拷贝的别人的写法
                $.fn[pluginName] = function(options) {
                    //each表示对多个元素调用，用return 是为了返回this，进行链式调用
                    return this.each(function() {
                        //判断有没有插件名字
                        if (!$.data(this, ‘plugin_’ + pluginName)) {
                            //生成插件类实例。
                            $.data(
                                this,
                                ‘plugin_’ + pluginName,
                                new Plugin(this, options),
                            )
                        }
                    })
                }
            })(jquery, window, document)
        </script>
        <script type=”text/javascript”>
            var alldata = [
                { id: ‘1’, text: ‘ceshi’ },
                { id: ‘1’, text: ‘运ces’ },
                { id: ‘1’, text: ‘ces’ },
                { id: ‘1’, text: ‘sec’ },
                { id: ‘2’, text: ‘cs门’ },
                { id: ‘2’, text: ‘cddd’ },
                { id: ‘2’, text: ‘dddddd’ },
            ]
            $(‘body’).pagination({
                // _url: ‘http://www.test.com’, //ajax的url
                // _ajaxData: ‘type=person&name=nick’, //ajax参数
                activePage: 1, //激活第1页
                onePageData: 4, //一页的显示条数
                data: alldata, //数据
                _success: function(data) {
                    var _html =
                        ‘<div></div><h3 class=”popBox_title”>信息显示</h3>’ +
                        ‘<table class=”searchTable”><thead><tr>’ +
                        ‘<th>ID</th><th>描述</th></tr></thead>’
                    for (var i in data) {
                        _html += ‘<tr>’
                        _html += ‘<td>’ + data[i].id + ‘</td>’
                        _html += ‘<td>’ + data[i].text + ‘</td>’
                        _html += ‘</tr>’
                    }
                    _html += ‘</table>’
                    $(this.Wrapper).html(_html)
                },
            })
        </script>
    </body>
</html>

按自己想法写的，没写多少注释。是否调用ajax使用的判断是
javascript 代码

if (_p._url != ”)

前端开发英文文档
前端开发文档策划书
前端开发文档
京东云平台 前端开发文档
前端开发文档devdocs
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论