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
  • 相关阅读:
    html+css
    HTML的矢量图转换文字
    js初级——复习html+css-下拉标志
    js初级——复习html+css
    四方定理(递归) --java
    进制转换模板
    最大值最小化问题 和最小值最大化问题 ---(二分)
    分治法---循环日程表问题
    全排列 ---java
    并查集---java模板
  • 原文地址:https://www.cnblogs.com/heyiming/p/11278943.html
Copyright © 2011-2022 走看看