zoukankan html css js c++ java

分页搜索后分页

分页js：page.js

function myPagination(_ref) {
    var pageSize = _ref.pageSize,
        pageTotal = _ref.pageTotal,
        curPage = _ref.curPage,
        id = _ref.id,
        getPage = _ref.getPage,
        showPageTotalFlag = _ref.showPageTotalFlag,
        showSkipInputFlag = _ref.showSkipInputFlag,
        pageAmount = _ref.pageAmount,
        dataTotal = _ref.dataTotal;

    this.pageSize = pageSize || 5; //分页个数
    this.pageTotal = pageTotal; //总共多少页
    this.pageAmount = pageAmount; //每页多少条
    this.dataTotal = dataTotal; //总共多少数据
    this.curPage = curPage || 1; //初始页码
    this.ul = document.createElement('ul');
    this.id = id;
    this.getPage = getPage;
    this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
    this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
    this.init();
};

// 给实例对象添加公共属性和方法
myPagination.prototype = {
    init: function init() {
        var pagination = document.getElementById(this.id);
        pagination.innerHTML = '';
        this.ul.innerHTML = '';
        pagination.appendChild(this.ul);
        var that = this;
        //首页
        that.firstPage();
        //上一页
        that.lastPage();
        //分页
        that.getPages().forEach(function (item) {
            var li = document.createElement('li');

            if (item == that.curPage) {
                // alert(item+"是否等于，初次"+that.curPage)
                li.className = 'active';
            } else {
                li.onclick = function () {
                    that.curPage = parseInt(this.innerHTML);
                    that.init();
                    that.getPage(that.curPage);
                };
            }
            li.innerHTML = item;
            that.ul.appendChild(li);
        });
        //下一页
        that.nextPage();
        //尾页
        that.finalPage();

        //是否支持跳转
        if (that.showSkipInputFlag) {
            that.showSkipInput();
        }
        //是否显示总页数,每页个数,数据
        if (that.showPageTotalFlag) {
            that.showPageTotal();
        }
    },
    //首页
    firstPage: function firstPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '首页';
        if(parseInt(that.curPage) > 1){
            li.onclick = function () {
            var val = parseInt(1);
            that.curPage = val;
            that.getPage(that.curPage);
            that.init();
            //首页，默认 为 0 ，每页10 
            selectInfPage(0, pageSize);
        };
        }
        else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
       
    },
    //上一页
    lastPage: function lastPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '<';
        if (parseInt(that.curPage) > 1) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) - 1;
                that.init();
                that.getPage(that.curPage);
                up_page = that.curPage;
                //异步请求
                selectInfPage(up_page, pageSize);
                //console.log("上一页是第" + up_page + '页');

            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //分页
    getPages: function getPages() {
        var pag = [];
        if (this.curPage <= this.pageTotal) {
            if (this.curPage < this.pageSize) {
                //当前页数小于显示条数
                var i = Math.min(this.pageSize, this.pageTotal);
                while (i) {
                    pag.unshift(i--);
                }
            } else {
                //当前页数大于显示条数
                var middle = this.curPage - Math.floor(this.pageSize / 2),
                    //从哪里开始
                    i = this.pageSize;
                if (middle > this.pageTotal - this.pageSize) {
                    middle = this.pageTotal - this.pageSize + 1;
                }
                while (i--) {
                    pag.push(middle++);
                }
            }
        } else {
            console.error('当前页数不能大于总页数');
        }
        if (!this.pageSize) {
            console.error('显示页数不能为空或者0');
        }
        return pag;
    },
    //下一页
    nextPage: function nextPage() {

        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '>';
        if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) + 1;
                that.init();
                that.getPage(that.curPage);
                next_page = that.curPage;
                //异步请求
                selectInfPage(next_page, pageSize);
                console.log("下一页是第" + next_page + '页');

            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //尾页
    finalPage: function finalPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '尾页';
        //给出判断，若当前页是最后一页，则尾页按钮不可点击
        if (parseInt(that.curPage) != parseInt(that.pageTotal)) {
            li.onclick = function () {
                var yyfinalPage = that.pageTotal;
                var val = parseInt(yyfinalPage);
                that.curPage = val;
                that.getPage(that.curPage);
                that.init();
                lastpage_num = that.curPage;
                selectInfPage(lastpage_num, pageSize);
                //console.log("最后一页是" + lastpage_num);
            };

        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //是否支持跳转
    showSkipInput: function showSkipInput() {
        var that = this;
        var li = document.createElement('li');
        li.className = 'totalPage';
        var span1 = document.createElement('span');
        span1.innerHTML = '跳转到';
        li.appendChild(span1);
        var input = document.createElement('input');
        input.setAttribute("type", "number");
        input.onkeydown = function (e) {
            var oEvent = e || event;
            if (oEvent.keyCode == '13') {
                var val = parseInt(oEvent.target.value);
                if (typeof val === 'number' && val <= that.pageTotal && val > 0) {
                    that.curPage = val;
                    that.getPage(that.curPage);
                    //异步请求
                    selectInfPage(val, pageSize);
                } else if (val < 1) {
                    alert("跳转页数不能小于1!")
                } else {
                    alert("跳转页数不能大于总页数!")
                }
                that.init();
            }
        };
        li.appendChild(input);
        var span2 = document.createElement('span');
        span2.innerHTML = '页';
        li.appendChild(span2);
        this.ul.appendChild(li);
    },
    //是否显示总页数,每页个数,数据
    showPageTotal: function showPageTotal() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '共&nbsp' + that.pageTotal + '&nbsp页';
        li.className = 'totalPage';
        this.ul.appendChild(li);
        var li2 = document.createElement('li');
        li2.innerHTML = '每页&nbsp' + that.pageAmount + '&nbsp条';
        li2.className = 'totalPage';
        this.ul.appendChild(li2);
        var li3 = document.createElement('li');
        li3.innerHTML = '合计&nbsp' + that.dataTotal + '&nbsp条数据';
        li3.className = 'totalPage';
        this.ul.appendChild(li3);
    }
};

View Code

搜索后的js：search_page.js

function myPaginationSOU(_ref) {
    var pageSize = _ref.pageSize,
        pageTotal = _ref.pageTotal,
        curPage = _ref.curPage,
        id = _ref.id,
        getPage = _ref.getPage,
        showPageTotalFlag = _ref.showPageTotalFlag,
        showSkipInputFlag = _ref.showSkipInputFlag,
        pageAmount = _ref.pageAmount,
        dataTotal = _ref.dataTotal;

    this.pageSize = pageSize || 5; //分页个数
    this.pageTotal = pageTotal; //总共多少页
    this.pageAmount = pageAmount; //每页多少条
    this.dataTotal = dataTotal; //总共多少数据
    this.curPage = curPage || 1; //初始页码
    this.ul = document.createElement('ul');
    this.id = id;
    this.getPage = getPage;
    this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
    this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
    this.init();
};

// 给实例对象添加公共属性和方法
myPaginationSOU.prototype = {
    init: function init() {
        var pagination = document.getElementById(this.id);
        pagination.innerHTML = '';
        this.ul.innerHTML = '';
        pagination.appendChild(this.ul);
        var that = this;
        //首页
        that.firstPage();
        //上一页
        that.lastPage();
        //分页
        that.getPages().forEach(function (item) {
            var li = document.createElement('li');

            if (item == that.curPage) {
                // alert(item+"是否等于，初次"+that.curPage)
                li.className = 'active';
            } else {
                li.onclick = function () {
                    that.curPage = parseInt(this.innerHTML);
                    that.init();
                    that.getPage(that.curPage);
                };
            }
            li.innerHTML = item;
            that.ul.appendChild(li);
        });
        //下一页
        that.nextPage();
        //尾页
        that.finalPage();

        //是否支持跳转
        if (that.showSkipInputFlag) {
            that.showSkipInput();
        }
        //是否显示总页数,每页个数,数据
        if (that.showPageTotalFlag) {
            that.showPageTotal();
        }
    },
    //首页
    firstPage: function firstPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '首页';
        if(parseInt(that.curPage) > 1){
            li.onclick = function () {
            var val = parseInt(1);
            that.curPage = val;
            that.getPage(that.curPage);
            that.init();
            //首页，默认 为 0 ，每页10 
            selectInfPage2(0, pageSize);
        };
        }
        else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
       
    },
    //上一页
    lastPage: function lastPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '<';
        if (parseInt(that.curPage) > 1) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) - 1;
                that.init();
                that.getPage(that.curPage);
                up_page = that.curPage;
                //异步请求
                selectInfPage2(up_page, pageSize);
                //console.log("上一页是第" + up_page + '页');

            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //分页
    getPages: function getPages() {
        var pag = [];
        if (this.curPage <= this.pageTotal) {
            if (this.curPage < this.pageSize) {
                //当前页数小于显示条数
                var i = Math.min(this.pageSize, this.pageTotal);
                while (i) {
                    pag.unshift(i--);
                }
            } else {
                //当前页数大于显示条数
                var middle = this.curPage - Math.floor(this.pageSize / 2),
                    //从哪里开始
                    i = this.pageSize;
                if (middle > this.pageTotal - this.pageSize) {
                    middle = this.pageTotal - this.pageSize + 1;
                }
                while (i--) {
                    pag.push(middle++);
                }
            }
        } else {
            console.error('当前页数不能大于总页数');
        }
        if (!this.pageSize) {
            console.error('显示页数不能为空或者0');
        }
        return pag;
    },
    //下一页
    nextPage: function nextPage() {

        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '>';
        if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
            li.onclick = function () {
                that.curPage = parseInt(that.curPage) + 1;
                that.init();
                that.getPage(that.curPage);
                next_page = that.curPage;
                //异步请求
                selectInfPage2(next_page, pageSize);
                console.log("下一页是第" + next_page + '页');

            };
        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //尾页
    finalPage: function finalPage() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '尾页';
        //给出判断，若当前页是最后一页，则尾页按钮不可点击
        if (parseInt(that.curPage) != parseInt(that.pageTotal)) {
            li.onclick = function () {
                var yyfinalPage = that.pageTotal;
                var val = parseInt(yyfinalPage);
                that.curPage = val;
                that.getPage(that.curPage);
                that.init();
                lastpage_num = that.curPage;
                selectInfPage2(lastpage_num, pageSize);
                //console.log("最后一页是" + lastpage_num);
            };

        } else {
            li.className = 'disabled';
        }
        this.ul.appendChild(li);
    },
    //是否支持跳转
    showSkipInput: function showSkipInput() {
        var that = this;
        var li = document.createElement('li');
        li.className = 'totalPage';
        var span1 = document.createElement('span');
        span1.innerHTML = '跳转到';
        li.appendChild(span1);
        var input = document.createElement('input');
        input.setAttribute("type", "number");
        input.onkeydown = function (e) {
            var oEvent = e || event;
            if (oEvent.keyCode == '13') {
                var val = parseInt(oEvent.target.value);
                if (typeof val === 'number' && val <= that.pageTotal && val > 0) {
                    that.curPage = val;
                    that.getPage(that.curPage);
                    //异步请求
                    selectInfPage2(val, pageSize);
                } else if (val < 1) {
                    alert("跳转页数不能小于1!")
                } else {
                    alert("跳转页数不能大于总页数!")
                }
                that.init();
            }
        };
        li.appendChild(input);
        var span2 = document.createElement('span');
        span2.innerHTML = '页';
        li.appendChild(span2);
        this.ul.appendChild(li);
    },
    //是否显示总页数,每页个数,数据
    showPageTotal: function showPageTotal() {
        var that = this;
        var li = document.createElement('li');
        li.innerHTML = '共&nbsp' + that.pageTotal + '&nbsp页';
        li.className = 'totalPage';
        this.ul.appendChild(li);
        var li2 = document.createElement('li');
        li2.innerHTML = '每页&nbsp' + that.pageAmount + '&nbsp条';
        li2.className = 'totalPage';
        this.ul.appendChild(li2);
        var li3 = document.createElement('li');
        li3.innerHTML = '合计&nbsp' + that.dataTotal + '&nbsp条数据';
        li3.className = 'totalPage';
        this.ul.appendChild(li3);
    }
};

View Code

page.css

/*分页样式*/
#pagination ul {
    list-style: none;
    padding-left: 0;
}

#pagination ul li {
    padding: 0 10px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    min-width: 36px;
    min-height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    background-color: #ffffff;
    color: #606266;
    border-radius: 6px;
    margin: 0 1px;
    border: 1px solid #ebebeb;
    height: 30px;
}

#pagination ul li:hover {
    transform: scale(1.1);
    background-color: #F4F6F8;
}

#pagination li.active {
    background: #98A6AD;
    color: white;
    cursor: not-allowed;
}

#pagination li.disabled {
    cursor: not-allowed;
}

#pagination li.totalPage {
    background: transparent;
    cursor: default;
    border: none;
    padding: 0 6px;
}

#pagination li.totalPage:hover {
    transform: none;
    background-color: #ffffff;
}


#pagination li input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: none;
    padding: 3px 5px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 40px;
    height: 25px;
    margin: 0 6px;
}

#pagination li input:focus {
    border-color: #98A6AD;
}

#pagination {
    user-select: none;
}

#pagination ul:nth-child(2) {
    border-radius: 6px;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

View Code

html代码：

<div id="pagination" style="text-align:center;display:none"></div>
<p style="text-align:center;margin-top:6px;display:none;">(注：输入页码后，按回车键可跳转)</p>

View Code

页面进入就加载的js：

    //每页显示条数
    var pageSize = 10;
    // var currentPage=0
    //页面加载完成，异步请求
    window.onload = function () {
        // var pageSize=2;
        var currentPage = 0
        //初次加载页面 默认第一页为 0 每页 10
        selectInfPage(currentPage, pageSize);
    }



    function selectInfPage(currentPage, pageSize) {
        $.ajax({
            url: "../sdTower/selectTowerByPage.do", //查
            type: "post",
            data: {
                currentPage: currentPage,
                pageSize: pageSize //每页多少条
            },
            success: function (data) {
                var zongshu = data.total; //数据总数
                //当数据总数大于0时，显示分页的样式
                if (zongshu > 0) {
                    $("#p_desc").show();
                    $("#pagination").show();
                }
                var pages = data.pages; //总页数
                var pagenums = data.pageNum; //当前页数
                if (pagenums == 0) {
                    pagenums = 1
                }
                var tiao = data.type; //每页显示条数
                var pageAmount = data.pageSize //每页多少条
                new myPagination({
                    id: 'pagination',
                    curPage: pagenums, //当前页码
                    pageTotal: pages, //总页数
                    pageAmount: pageAmount, //每页多少条
                    dataTotal: zongshu, //总共多少条数据
                    pageSize: 5, //显示一行页码数 默认 5
                    showPageTotalFlag: true, //是否显示数据统计
                    showSkipInputFlag: true, //是否支持跳转
                    getPage: function (page) {
                        //获取当前页数
                        //console.log("我在这"+page);
                        selectInfPage(page, pageSize);
                    }
                })
                checkData(data);
            },

            error: function () {
                alert("查询失败");
            }
        });

    }

View Code

分页列表数据：

function checkData(data) {
        var html = '';
        for (var i = 0; i < data.list.length; i++) { //循环json对象，拼接tr,td的html
            var id = data.list[i].id;
            html = html + '<tr  id="line_tr' + id + '">';
            html = html + '<td width="25px">';
            html = html + '<label>';
            html = html + '<input type="checkbox" class="ace" name="check" value=' + id +
                '>';
            html = html + '</label>';
            html = html + '</td>';
            //html = html + '<td  id="lineNumber_td'+id+'">' + data.list[i].lineNumber + '' + '</td>'; //线路编号
            //html = html + '<td  id="code_td' + id + '">' + data.list[i].code + '' + '</td>'; //电塔编号

            if (data.list[i].code != null) {
                html = html + '<td  id="code_td' + id + '">' + data.list[i].code + '</td>'; //电塔编号
            } else {
                html = html + '<td  id="code_td' + id + '"></td>'; //电塔编号
            }
            // if(data.list[i].name!=null){
            //     html = html + '<td  id="name_td' + id + '">' + data.list[i].name + '</td>'; //电塔名称
            // }
            // else{
            //     html = html + '<td  id="name_td' + id + '">无数据</td>'; //电塔名称
            // }

            //线路名称
            var powerList = data.list[i].sdPowerBureau;
            if (powerList != null) {
                html = html + '<td  id="lineName_td' + id + '" >' + powerList.name + '' +
                    '</td>';
            } else {
                html = html + '<td  id="lineName_td' + id +
                    '" style="display:none;">无数据</td>';
            }



            if (data.list[i].high != null) {
                html = html + '<td  id="high_td' + id + '">' + data.list[i].high + '</td>'; //呼高(米)
            } else {
                html = html + '<td  id="high_td' + id + '"></td>'; //呼高(米)
            }

            var powerList = data.list[i].sdPowerBureau;
            if (powerList != null) {

                html = html + '<td  id="powerTreeId_td' + id + '" style="display:none;">' +
                    powerList.id + '' +
                    '</td>'; //所属电力单位ID
                html = html + '<td  id="powerType_td' + id + '" style="display:none;">' +
                    powerList.type + '' +
                    '</td>'; //所属电力单位type
                html = html + '<td  id="powerName_td' + id + '" style="display:none;">' +
                    powerList.name + '' +
                    '</td>'; //所属电力单位name   
                html = html + '<td  id="powerParentId_td' + id + '" style="display:none;">' +
                    powerList.parentId + '' +
                    '</td>'; //所属电力单位的parentId 上级ID


            } else {
                html = html + '<td  id="powerName_td' + id +
                    '" style="display:none;">无数据</td>'; //所属电力单位
            }

            //treeId
            // if (data.list[i].treeId != null) {
            //     html = html + '<td  id="powerName_td' + id + '" style="display:none;">' + data.list[i].treeId + '' +
            //         '</td>'; //所属电力单位
            // }
            // else {
            //     html = html + '<td  id="powerName_td' + id + '" style="display:none;">无数据</td>'; //所属电力单位
            // }
            if (data.list[i].material != null) {


                html = html + '<td  id="material_id' + id + '" style="display:none;">' +
                    data.list[i].material + '' +
                    '</td>'; //材质

                if (data.list[i].material == 0) {
                    html = html + '<td  id="material_td' + id + '">钢管</td>'; //电塔材质

                } else if (data.list[i].material == 1) {
                    html = html + '<td  id="material_td' + id + '">角钢</td>'; //电塔材质
                }
            } else {
                html = html + '<td  id="material_td' + id + '" >无数据</td>'; //电塔材质
            }

            if (data.list[i].type != null) {

                html = html + '<td  id="type_id' + id + '" style="display:none;">' +
                    data.list[i].type + '' +
                    '</td>'; //电塔型

                if (data.list[i].type == 0) {
                    html = html + '<td  id="type_td' + id + '">猫头型</td>';
                } else if (data.list[i].type == 1) {
                    html = html + '<td  id="type_td' + id + '">酒杯型</td>';
                } else if (data.list[i].type == 2) {
                    html = html + '<td  id="type_td' + id + '">干字型</td>';
                }
            } else {
                html = html + '<td  id="types' + id + '" >无数据</td>'; //电塔型号
            }

            //版本1 只放大，无法切换上一张 下一张
            // if (data.list[i].sdTowerImagesList.length > 0) { //判断项目list是否有图片信息
            //     var sdTowerImagesList = eval(data.list[i].sdTowerImagesList); //声明图片list
            //     for (var j in sdTowerImagesList) {
            //         var imgUrL = sdTowerImagesList[j].path;
            //         //html = html +"<td   id='voltage_td' + id + ''><img src='"+imgUrL+"' /></td>" //铺设照片
            //         html = html + '<td id="img_td' + id + '"><img class="tb_img" src="../' + imgUrL +
            //             '" style="50px;height:50px;cursor:pointer;"/></td>'; //图片路径
            //         break; //跳出循环
            //     }
            // } else {
            //     html = html + '<td  id="img_td' + id +
            //         '"><img src="images/null.jpg" style="50px;height:50px"/></td>'; //铺设照片
            // }

            //版本2 可放大图片 可切换上张图 下张图
            if (data.list[i].sdTowerImagesList.length > 0) { //判断项目list是否有图片信息
                var sdTowerImagesList = eval(data.list[i].sdTowerImagesList); //声明图片list
                for (var j in sdTowerImagesList) {
                    var imgUrL = sdTowerImagesList[j].path;
                    //html = html +"<td   id='voltage_td' + id + ''><img src='"+imgUrL+"' /></td>" //铺设照片
                    html = html + '<td ><img id=' + id + ' class="tb_img22" data-src="../' + imgUrL +
                        '"  src="../' + imgUrL +
                        '" style="50px;height:50px;cursor:pointer;"/></td>'; //图片路径
                    break; //跳出循环
                }
            } else {
                html = html + '<td  id="' + id +
                    '"><img src="images/null.jpg" style="50px;height:50px"/></td>'; //铺设照片
            }


            if (data.list[i].acdc != null) {
                html = html + '<td  id="acdc_td' + id + '">' + data.list[i].acdc + '</td>'; //电流
            } else {
                html = html + '<td  id="acdc_td' + id + '"></td>'; //电流
            }



            if (data.list[i].circuits != null) {
                html = html + '<td  id="circuits_td' + id + '">' + data.list[i].circuits +
                    '</td>'; //回路数
            } else {
                html = html + '<td  id="circuits_td' + id + '"></td>'; //回路数
            }



            if (data.list[i].voltage != null) {
                html = html + '<td  id="voltage_td' + id + '">' + data.list[i].voltage +
                    '</td>'; //电压
            } else {
                html = html + '<td  id="voltage_td' + id + '"></td>'; //电压
            }
            // html = html + '<td  id="elevation_td'+id+'">' + data.list[i].elevation + '</td>'; //海拔高度
            // html = html + '<td  id="longitude_td'+id+'">' + data.list[i].longitude + '</td>'; //经度
            // html = html + '<td  id="latitude_td'+id+'">' + data.list[i].latitude + '</td>'; //纬度
            //html = html + '<td  id="imagesPath_td'+id+'"><img src="' + data.list[i].imagesPath + '"/></td>'; //图片路径
            //html = html + '<td  id="addTimes_td'+id+'">' + timestampToTime(data.list[i].addTimes) + '</td>'; //录入时间
            //html = html + '<td  id="changeTimes_td'+id+'">' + data.list[i].changeTimes + '</td>'; //修改时间
            //html = html + '<td  id="treeId_td'+id+'">' + data.list[i].treeId + '</td>'; //负责单位

            if (data.list[i].reserve != null) {
                html = html + '<td  id="reserve_td' + id + '">' + data.list[i].reserve +
                    '</td>'; //备注
            } else {
                html = html + '<td  id="reserve_td' + id + '">无数据</td>'; //备注
            }
            html = html + '<td  class="td-manage">';
            html = html +
                '<a title="绑定" href="javascript:;" style="padding:4px" class="btn btn-xs btn-info" onclick="bindCollector(' +
                id + ')">绑定</a>';
            html = html +
                '<a title="编辑" href="javascript:;" style="padding:4px" class="btn btn-xs btn-info" onclick="edit_only(' +
                id + ')">编辑</a>';
            html = html +
                '<a title="删除" href="javascript:;" style="padding:4px" class="btn btn-xs  btn-warning" onclick="del_only(' +
                id + ')">删除</a>';
            html = html + '</td>';
            html = html + '</tr>';
        }
        $('#line_data').html(html); //通过jquery方式获取table，并把tr,td的html输出到table中
    }

View Code

点击搜索按钮执行的事件

     //点击按钮执行查询     线路信息
      /*杆塔详情搜索 开始*/
      function search_line() {
        //输入的文本值 线路名
        var towerNumber = $("#towerNumber").val();
        var lineNameText= $("#lineNameText").val();

        //传值treeId到后台 市区
        var sel1 = $('.city_select2 option:selected');
        shi_treeId = sel1.val(); //获取选中<option > value 的实参的
        var treeId = document.getElementById("province_id").value = shi_treeId;
        /**
         * 市区下拉 value = 省份ID
         * 所以直接获取
         * */
        // alert("市区="+treeId)

        //传值parentId到后台
        var sel2 = $('.ele_select2 option:selected');
        powerId = sel2.val();
        var powerId = document.getElementById("power_ids").value = powerId;


        // var sel_line = $('#lines_lv2 option:selected');
        // lineId = sel_line.val();
        // var lineId = document.getElementById("line_search").value = lineId;

        //如果选择全部时，赋空
        // if (treeId == powerId) {
        //     powerId = null;
        // }
        // if (powerId == lineId) {
        //     lineId = null;
        // }


     //每页显示条数
   var pageSize = 10;
   var currentPage = 1
   //初次加载页面 默认第一页为 0 每页 10
   selectInfPage2(currentPage, pageSize);
   
    function selectInfPage2(currentPage, pageSize) {
        $.ajax({
            url: '../sdTower/selectTowerByPage.do',
            type: 'post',
            dataType: 'json',
            data: {
                currentPage: currentPage,
                pageSize: 10,
                treeId: treeId,
                powerId: powerId,
                // lineId: lineId,
                code: towerNumber,
                lineNameText: lineNameText
            },
            success: function (data) {
                /*搜索之后再次进行分页  开始*/
                var zongshu = data.total; //数据总数
                //当数据总数大于0时，显示分页的样式
                if (zongshu > 0) {
                    $("#p_desc").show();
                    $("#pagination").show();
                }
                else{
                    $("#p_desc").hide();
                    $("#pagination").hide();
                }
                var pages = data.pages; //总页数
                var pagenums = data.pageNum; //当前页数
                if (pagenums == 0) {
                    pagenums = 1
                }
                var tiao = data.type; //每页显示条数
                var pageAmount = data.pageSize //每页多少条
                new myPaginationSOU({
                    id: 'pagination',
                    curPage: pagenums, //当前页码
                    pageTotal: pages, //总页数
                    pageAmount: pageAmount, //每页多少条
                    dataTotal: zongshu, //总共多少条数据
                    pageSize: 5, //显示一行页码数 默认 5
                    showPageTotalFlag: true, //是否显示数据统计
                    showSkipInputFlag: true, //是否支持跳转
                    getPage: function (page) {
                        //获取当前页数
                        //console.log("我在这"+page);
                        if(treeId=undefined) {
                            treeId = ''
                        }
                        if(powerId=undefined) {
                            powerId = ''
                        }
                        if(code=undefined) {
                            code = ''
                        }
                        if(lineNameText=undefined) {
                            lineNameText = ''
                        }
                       
                        selectInfPage2(page, pageSize,treeId,powerId,code,lineNameText);
                    }
                })
                 /*搜索之后再次进行分页  结束*/
                $("#line_data").empty();
                checkData2(data);
            }
        });
    }

    }

View Code

搜索后分页列表的数据：

function checkData2(data) {
        var html = '';
        for (var i = 0; i < data.list.length; i++) { //循环json对象，拼接tr,td的html
            var id = data.list[i].id;
            html = html + '<tr  id="line_tr' + id + '">';
            html = html + '<td width="25px">';
            html = html + '<label>';
            html = html + '<input type="checkbox" class="ace" name="check" value=' + id +
                '>';
            html = html + '</label>';
            html = html + '</td>';
          
            if (data.list[i].code != null) {
                html = html + '<td  id="code_td' + id + '">' + data.list[i].code + '</td>'; //电塔编号
            } else {
                html = html + '<td  id="code_td' + id + '"></td>'; //电塔编号
            }

            //线路名称
            var powerList = data.list[i].sdPowerBureau;
            if (powerList != null) {
                html = html + '<td  id="lineName_td' + id + '" >' + powerList.name + '' +
                    '</td>';
            } else {
                html = html + '<td  id="lineName_td' + id +
                    '" style="display:none;">无数据</td>';
            }



            if (data.list[i].high != null) {
                html = html + '<td  id="high_td' + id + '">' + data.list[i].high + '</td>'; //呼高(米)
            } else {
                html = html + '<td  id="high_td' + id + '"></td>'; //呼高(米)
            }

            var powerList = data.list[i].sdPowerBureau;
            if (powerList != null) {

                html = html + '<td  id="powerTreeId_td' + id + '" style="display:none;">' +
                    powerList.id + '' +
                    '</td>'; //所属电力单位ID
                html = html + '<td  id="powerType_td' + id + '" style="display:none;">' +
                    powerList.type + '' +
                    '</td>'; //所属电力单位type
                html = html + '<td  id="powerName_td' + id + '" style="display:none;">' +
                    powerList.name + '' +
                    '</td>'; //所属电力单位name   
                html = html + '<td  id="powerParentId_td' + id + '" style="display:none;">' +
                    powerList.parentId + '' +
                    '</td>'; //所属电力单位的parentId 上级ID


            } else {
                html = html + '<td  id="powerName_td' + id +
                    '" style="display:none;">无数据</td>'; //所属电力单位
            }

            if (data.list[i].material != null) {


                html = html + '<td  id="material_id' + id + '" style="display:none;">' +
                    data.list[i].material + '' +
                    '</td>'; //材质

                if (data.list[i].material == 0) {
                    html = html + '<td  id="material_td' + id + '">钢管</td>'; //电塔材质

                } else if (data.list[i].material == 1) {
                    html = html + '<td  id="material_td' + id + '">角钢</td>'; //电塔材质
                }
            } else {
                html = html + '<td  id="material_td' + id + '" >无数据</td>'; //电塔材质
            }

            if (data.list[i].type != null) {

                html = html + '<td  id="type_id' + id + '" style="display:none;">' +
                    data.list[i].type + '' +
                    '</td>'; //电塔型

                if (data.list[i].type == 0) {
                    html = html + '<td  id="type_td' + id + '">猫头型</td>';
                } else if (data.list[i].type == 1) {
                    html = html + '<td  id="type_td' + id + '">酒杯型</td>';
                } else if (data.list[i].type == 2) {
                    html = html + '<td  id="type_td' + id + '">干字型</td>';
                }
            } else {
                html = html + '<td  id="types' + id + '" >无数据</td>'; //电塔型号
            }

            //版本2 可放大图片 可切换上张图 下张图
            if (data.list[i].sdTowerImagesList.length > 0) { //判断项目list是否有图片信息
                var sdTowerImagesList = eval(data.list[i].sdTowerImagesList); //声明图片list
                for (var j in sdTowerImagesList) {
                    var imgUrL = sdTowerImagesList[j].path;
                    //html = html +"<td   id='voltage_td' + id + ''><img src='"+imgUrL+"' /></td>" //铺设照片
                    html = html + '<td ><img id=' + id + ' class="tb_img22" data-src="../' + imgUrL +
                        '"  src="../' + imgUrL +
                        '" style="50px;height:50px;cursor:pointer;"/></td>'; //图片路径
                    break; //跳出循环
                }
            } else {
                html = html + '<td  id="' + id +
                    '"><img src="images/null.jpg" style="50px;height:50px"/></td>'; //铺设照片
            }


            if (data.list[i].acdc != null) {
                html = html + '<td  id="acdc_td' + id + '">' + data.list[i].acdc + '</td>'; //电流
            } else {
                html = html + '<td  id="acdc_td' + id + '"></td>'; //电流
            }



            if (data.list[i].circuits != null) {
                html = html + '<td  id="circuits_td' + id + '">' + data.list[i].circuits +
                    '</td>'; //回路数
            } else {
                html = html + '<td  id="circuits_td' + id + '"></td>'; //回路数
            }



            if (data.list[i].voltage != null) {
                html = html + '<td  id="voltage_td' + id + '">' + data.list[i].voltage +
                    '</td>'; //电压
            } else {
                html = html + '<td  id="voltage_td' + id + '"></td>'; //电压
            }
          

            if (data.list[i].reserve != null) {
                html = html + '<td  id="reserve_td' + id + '">' + data.list[i].reserve +
                    '</td>'; //备注
            } else {
                html = html + '<td  id="reserve_td' + id + '">无数据</td>'; //备注
            }
            html = html + '<td  class="td-manage">';
            html = html +
                '<a title="绑定" href="javascript:;" style="padding:4px" class="btn btn-xs btn-info" onclick="bindCollector(' +
                id + ')">绑定</a>';
            html = html +
                '<a title="编辑" href="javascript:;" style="padding:4px" class="btn btn-xs btn-info" onclick="edit_only(' +
                id + ')">编辑</a>';
            html = html +
                '<a title="删除" href="javascript:;" style="padding:4px" class="btn btn-xs  btn-warning" onclick="del_only(' +
                id + ')">删除</a>';
            html = html + '</td>';
            html = html + '</tr>';
        }
        $('#line_data').html(html); //通过jquery方式获取table，并把tr,td的html输出到table中
    }

View Code

查看全文

相关阅读:
微人事项目-mybatis-持久层
 通过外键连接多个表
 springioc
Redis 消息中间件 ServiceStack.Redis 轻量级
 深度数据对接链接服务器数据传输
 sqlserver 抓取所有执行语句 SQL语句分析死锁抓取
 sqlserver 索引优化 CPU占用过高执行分析服务器检查
 sql server 远程备份 bak 删除
 冒泡排序
 多线程异步 beginInvoke EndInvoke 使用

原文地址：https://www.cnblogs.com/heyiming/p/11278943.html

分页 搜索后分页

分页搜索后分页