zoukankan      html  css  js  c++  java
  • 原生js 定义分页控件,类似于百度搜索

    实现一个类似于百度搜索结果的分页样式,样式可以自定义,接近于原生,少部分Jquery 。

    1、实现效果截图(默认无任何样式)

     2、主要程序代码

    define(function (require, exports, module) {
        /*
        说明:自定义分页组件
        作者:胡泽云
        日期:2019-01-06
        */
        var index = {
            data: {
                pageSize: 10,    //每页数量
                total: 100,    //总页数
                curPage: 1,   //当前页
                maxPageNum: 10   //视野范围的数目
            },
    //程序初始化 init: function (option) { var me = this; me.option = option; me.data.pageSize = option.pageSize; me.data.total = option.total; if (option.maxPageNum) { me.data.maxPageNum = option.maxPageNum; } me.render(option.containerId); //containerId 通过init 进行传递
            //me.bind();
    },
    //进行渲染 render: function (containerId) { var html = "" var me = this; var pageNum = Math.round(me.data.total / me.data.pageSize); //取中间值 var midle = me.data.maxPageNum / 2; var beginPage = me.data.curPage - midle; var endPage = me.data.curPage + midle - 1; //开始边界处理 if (beginPage <= 0) { beginPage = 1; } if (endPage < me.data.maxPageNum) { endPage += me.data.maxPageNum - endPage; } //结束边界 if (endPage >= pageNum) { endPage = pageNum; } console.log(beginPage + " " + endPage); for (var num = beginPage; num <= endPage; num++) { if (me.data.curPage == num) { html += "<span name='pageSpan' >" + num + "</span> "; } else { html += "<a name='page' href='javascript:;' >" + num + "</a> "; } } //上一页 下一页 if (beginPage > 1 && endPage < pageNum) { html = "<a id='prePage' href='javascript:;' >上一页</a> " + html + "<a id='nextPage' href='javascript:;' >下一页</a>"; } else { if (beginPage == 1) { html += " <a id='nextPage' href='javascript:;' >下一页</a>"; } else if (endPage == pageNum) { html = "<a id='prePage' href='javascript:;' >上一页</a> " + html; } } html += "<div>总共:" + me.data.total + " 条," + pageNum + "页</div>"; if (containerId) { $("#" + containerId).html(html); } console.log(html); //重新绑定事件 me.bind(); if (me.option.pageChange) { //var beginRcordNum = me.data.curPage * this.option.pageSize; //var endRcordNum = beginRcordNum + this.option.pageSize; me.option.pageChange({ curPage: me.data.curPage, //beginRcordNum: beginRcordNum, //endRcordNum: endRcordNum, pageSize: me.data.pageSize }); } }, bind: function () { var me = this; //绑定click 点击事件 $("[name='page']").each(function (index, obj) { $(obj).on("click", function () { var page = $(obj).text(); me.data.curPage = parseInt(page); if (me.option.containerId) { me.render(me.option.containerId); } }); }); //上下页 $("#prePage").on("click", function () { me.data.curPage--; if (me.option.containerId) { me.render(me.option.containerId); } }) //下一页 $("#nextPage").on("click", function () { me.data.curPage++; if (me.option.containerId) { me.render(me.option.containerId); } }) } }; exports = module.exports = index; })

     详细代码  https://github.com/huzeyun/jspage/

  • 相关阅读:
    指定一个M3U8文件,判断它包含的TS文件是不是都存在。指定一个Office生成的Swf文件,判断它包含的Swf文件是不是完整都存在。
    东师理想云平台异步任务处理系统V2.0重构思路
    Mysql查询出所有列名
    IntelliJ IDEA添加jar包
    IDEA下利用Jrebel插件实现JFinal项目main方法【热加载】
    整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI
    有没有 linux 命令可以获取我的公网 ip, 类似 ip138.com 上获取的 ip?
    MongoDB学习笔记(5)--document
    MongoDB学习笔记(4)--collection
    MongoDB学习笔记(3)--删除数据库
  • 原文地址:https://www.cnblogs.com/hzy168/p/11813824.html
Copyright © 2011-2022 走看看