分页 搜索后分页
分页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 = '共 ' + that.pageTotal + ' 页'; li.className = 'totalPage'; this.ul.appendChild(li); var li2 = document.createElement('li'); li2.innerHTML = '每页 ' + that.pageAmount + ' 条'; li2.className = 'totalPage'; this.ul.appendChild(li2); var li3 = document.createElement('li'); li3.innerHTML = '合计 ' + that.dataTotal + ' 条数据'; li3.className = 'totalPage'; this.ul.appendChild(li3); } };
搜索后的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 = '共 ' + that.pageTotal + ' 页'; li.className = 'totalPage'; this.ul.appendChild(li); var li2 = document.createElement('li'); li2.innerHTML = '每页 ' + that.pageAmount + ' 条'; li2.className = 'totalPage'; this.ul.appendChild(li2); var li3 = document.createElement('li'); li3.innerHTML = '合计 ' + that.dataTotal + ' 条数据'; li3.className = 'totalPage'; this.ul.appendChild(li3); } };
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; }
html代码:
<div id="pagination" style="text-align:center;display:none"></div> <p style="text-align:center;margin-top:6px;display:none;">(注:输入页码后,按回车键可跳转)</p>
页面进入就加载的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("查询失败"); } }); }
分页列表数据:
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中 }
点击搜索按钮执行的事件
//点击按钮执行查询 线路信息 /*杆塔详情搜索 开始*/ 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); } }); } }
搜索后分页列表的数据:
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中 }