zoukankan      html  css  js  c++  java
  • jQuery+easyui分页控件

    <div>
                    <div class="pagination">
                        <ul style="list-style-type:none;">
                            <li class="gofirst" title="首页" id="first"></li>
                            <li class="total"><span name="pages" id="maxPage">2</span></li>
                            <li class="goleft" title="上一页" id="prev"></li>
                            <li class="active"><input id="iptpageNumber" name="pageNumber" type="text" style="35px;text-align:center" min="1" value="1"/></li>
                            <li class="goright" title="下一页" id="next"></li>
                            <li class="liNumber"><span name="totalnumber" id="maxSize">12</span></li>
                            <li class="golast" title="尾页" id="last"></li>
                        </ul>
                        <a class="refresh" href="#" title="刷新" id="refresh"></a>
                    </div>
                </div>

    js部分:

    var tempPage = 1;
    var maxPage;
    var totalSize;
    //点击分页转换
    function refreshTable(type) {
        var temp;
        if (isNaN(type)) {
            //非数字
            if (type == "prev") {
                if (tempPage == 1) {
                    return;
                } else {
                    temp = tempPage - 1;
                    tempPage = tempPage - 1;
                }
            } else if (type == "next") {
                if (tempPage == maxPage) {
                    return;
                } else {
                    temp = tempPage + 1;
                    tempPage = tempPage + 1;
                }
            } else if (type == "first") {
                temp = 1;
            } else if (type == "last") {
                temp = maxPage;
                tempPage = maxPage;
            } else {
                return;
            }
        } else {
            var ex = /^d+$/;
            if (ex.test(type) && Number(type) > 0) {
                temp = Number(type);
            } else {
                return;
            }
        }
        var time = $('#attYearMonth').datebox('getValue');
        var indust = $("#Indu_Code").combobox("getValue").toString();
        var index = $("#Index_Code").combobox("getValue").toString();
    
        $.ajax({
            url: '',
            type: 'post',
            data: { indust: indust, time: time, index: index, pageindex: temp },
            dataType: 'JSON',
            success: function (data) {
                renderTable(data);
                var total = Math.floor(data.length / 5) + 1;
                maxPage = total;
                totalSize = data.length;
    
                changePage();
            }
        })
    }
    //改变分页显示
    function changePage() {
        $("#maxPage").html(maxPage);
        $("#maxSize").html(totalSize);
    }

    按钮事件:

    $("#prev").click(function () {
                    refreshTable("prev");
                })
    
                $("#next").click(function () {
                    refreshTable("next");
                })
    
                $("#first").click(function () {
                    refreshTable("first");
                })
    
                $("#last").click(function () {
                    refreshTable("last");
                })
    
                $("#refresh").click(function () {
                    var temp = $("#iptpageNumber").val();
                    refreshTable(temp);
                })
    记录编程的点滴,体会学习的乐趣
  • 相关阅读:
    RPC中阻塞队列的作用
    记用tensorflow-ranking时的bugs
    JDK作泛型比较时为什么把逻辑代码写两遍
    Java 不能声明泛型数组
    QuickSort Hoare vs Lomuto
    Java 对数组扩容
    Java交换两对象的问题
    毕业 失业
    dependencyManagement介绍
    web笔记
  • 原文地址:https://www.cnblogs.com/AduBlog/p/13454444.html
Copyright © 2011-2022 走看看