用jquery编写的分页插件

源码

function _pager_go(total_page) {
    var page_str = $("#_pager_textbox").val();
    var int_expr = /^(\+|-)?\d+$/;
    if (!int_expr.test(page_str)) {
        alert("请输入整数");
        return;
    }

    var go_page = parseInt(page_str);
    if (go_page < 1 || go_page > total_page) {
        alert("跳转页数超出范围");
        return;
    }
    var link_fn_name = $("#_pager_link_fn_name").val();
    eval(link_fn_name + "(" + go_page + ")");
}

$.fn.ss_pager = function (options) {
    var box = $(this);
    var current_page = options.current_page;
    var total_page = options.total_page;
    var link_class_name = options.link_class || "pageitem";
    var text_class_name = options.text_class || "";
    var link_fn_name = options.link_fn || "void";
    var show_pages = options.show_pages || 10;
    var total_size = options.total_size;
    var btn_class_name = options.btn_class || "btn";

    if (current_page <= 1) {
        current_page = 1;
    }

    if (total_size <= 0) {
        $(box).html("<span style=‘color:red;‘>没有记录</span>");
        return;
    }

    function __wprint(iscurrent, index, text) {
        if (!iscurrent) {
            return "<a class=‘" + link_class_name + "‘ href=‘javascript:" + link_fn_name + "(" + index + ")" + "‘>" + text + "</a>";
        }
        else {
            return "<a class=‘" + text_class_name + "‘>" + text + "</a>";
        }
    }

    var html_buf = ‘‘;
    if (total_size) {
        html_buf += __wprint(true, "", "共有" + total_size + "条记录");
    }

    html_buf += __wprint(current_page - 1 <= 0, current_page - 1, "上一页");
    if (total_page > 1) {
        //开始页码
        var start = 2;
        var end = total_page - 1;
        var _t = parseInt(show_pages / 2) - 1;

        html_buf += __wprint(current_page == 1, 1, 1);
        if (current_page - _t > 1) {
            html_buf += __wprint(true, "", "...");
            start = current_page - _t;
        }

        for (var i = start; i < current_page; i++) {
            html_buf += __wprint(current_page == i, i, i);
            //console.log("前 "+i);
        };

        if (current_page > 1 && current_page < total_page) {
            html_buf += __wprint(true, current_page, current_page);
        }

        if (current_page + _t < total_page - 1) {
            end = current_page + _t;
            //console.log("后 e "+ (current_page+_t));
            //console.log("后 e "+ (total_page-1));
        }

        for (var i = current_page + 1; i <= end; i++) {
            html_buf += __wprint(current_page == i, i, i);
            //console.log("后 "+i);
        };

        if (current_page + _t < total_page - 1) {
            html_buf += __wprint(true, "", "...");
        };
        html_buf += __wprint(current_page == total_page, total_page, total_page);
    }
    else {
        html_buf += __wprint(current_page == 1, 1, 1);
    }

    html_buf += __wprint(current_page + 1 > total_page, current_page + 1, "下一页");

    html_buf += ("<a class=‘" + text_class_name + "‘> <input type=‘text‘ id=‘_pager_textbox‘ value=‘" + current_page + "‘ />");
    html_buf += ("<input type=‘hidden‘ value=‘" + link_fn_name + "‘ id=‘_pager_link_fn_name‘ />");
    html_buf += ("<input type=‘button‘ class=‘btn‘ value=‘转到‘ id=‘_pager_button‘ onclick=‘_pager_go(" + total_page + ")‘ /> </a>");

    $(box).html(html_buf);
};
时间: 2024-10-12 21:40:57

用jquery编写的分页插件的相关文章

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

JQuery编写自己的插件(七)

一:jQuery插件的编写基础1.插件的种类编写插件的目的是给一系列已经方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率.常见的种类有以下三种:封装对象方法的插件 二:编写自己的插件1.封装jQuery对象方法的插件Step1:框架;(    function($) {    $.fn.extend({        ….        });    })(jQuery) 实例:改变背景色 ;( function($) { $.fn.extend({ "color&quo

Jquery.Page.js 分页插件的使用

1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" /> <script src="~/Scripts/jQuery-1.8.3.js"></script> <script src="~/Scripts/Page/jquery.pager.js"></script>

jQuery Pagination Ajax分页插件

下载地址:https://github.com/gbirke/jquery_pagination 参数 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 可选参数,默认是10 num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10 current_page 当前选中的页面 可选参数,默认是0,表示第1页 num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0 li

jquery.pagination.js分页插件的使用

1.引用jquery.pagination.js <script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script> 2.发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度: 第二次发送请求传入点击的页码号和页的大小,返回数据得到点击页的数据 参考链接: 1.https://blog.csdn.net/baidu_25343343/art

用jquery编写的tab插件

源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find("ul:first > li"); //console.log($(btns).length); var contents = $(this).find("ul").eq(1).children("li"); //console.log($(contents).length); $

JQuery分页插件封装(源码来自百度,自己封装)

最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运行看看,下图是文件目录展示. html <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

一款基于jQuery的分页插件

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by [email protected] */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @pa