分页 搜索后分页

其他 2019-07-31 20:58:01 阅读次数: 0
分页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="width:50px;height:50px;cursor:pointer;"/></td>'; //图片路径
            //         break; //跳出循环
            //     }
            // } else {
            //     html = html + '<td  id="img_td' + id +
            //         '"><img src="images/null.jpg" style="width: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="width:50px;height:50px;cursor:pointer;"/></td>'; //图片路径
                    break; //跳出循环
                }
            } else {
                html = html + '<td  id="' + id +
                    '"><img src="images/null.jpg" style="width: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="width:50px;height:50px;cursor:pointer;"/></td>'; //图片路径
                    break; //跳出循环
                }
            } else {
                html = html + '<td  id="' + id +
                    '"><img src="images/null.jpg" style="width: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

猜你喜欢

转载自www.cnblogs.com/heyiming/p/11278943.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022