<script>
var data ={/json_encode($mapdata)/} ||"";
var $findFilterData = $("#find-filter-data");
$findFilterData.on({
keyup: function (e) {
fnFindFilterData(e);
},
blur: function (e) {
fnFindFilterData(e);
}
});
// 根据当前页数分割数据并渲染
// data:全部数据, currentPage:当前所在页数
function sliceDataByPage(data, currentPage) {
data = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
return data;
}
//生成即时过滤数据对应的HTML片段
function renderFilterHtml(data) {
if (data && data.length > 0) {
var listHtml = "";
for (var i = 0; i < data.length; i++) {
var index = i + 1, liHtml = "<tr>";
var viewurl="/tool/MapData?type=view&mapkey="+data[i].map_key;
var editurl="/tool/MapData?type=edit&mapkey="+data[i].map_key;
liHtml += "<td>" + index + "</td><td>" + data[i].map_name + "</td><td>" + data[i].map_key + "</td><td>" + data[i].creater + "</td><td>" + data[i].updater + "</td><td><a href='"+viewurl+"' class='btn btn-default btn-sm button-oprtation'>查看</a><a href='"+editurl+"' class='btn btn-default btn-sm button-oprtation'>编辑</a></td>"
liHtml += "</tr>";
listHtml += liHtml;
}
} else {
listHtml = "<tr><td colspan='6' style='text-align: center'>没有数据</td></tr>";
}
$(".table-list").find(".item-list").html(listHtml);
}
// 根据输入的mapkey查询数据
function fnFindFilterData(e) {
var inf = $(e.target).val() || "";
var totalPageNumFind = 1, currentPageFind = 1; // 查询结果的总页数,当前在查询结果的第几页
var resultInf = [], resultInfHandle = []; // 查询结果
$(".pagination").html("");
if (inf && inf.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].map_key.indexOf(inf) > -1) {
resultInf.push(data[i]);
}
}
}
totalPageNumFind = Math.ceil(resultInf.length / pageSize) || 1; // 总页数
if (totalPageNumFind > 1) {
resultInfHandle = sliceDataByPage(resultInf, currentPageFind);
publicOperation(resultInf, currentPageFind, totalPageNumFind, resultInfHandle);
} else {
renderFilterHtml(resultInf);
bindEventHandle(resultInf, totalPageNumFind);
}
}
function bindEventHandle(resultInf, totalPageNumFind) {
$(".page-num-first").on('click', function () {
var currentPage = 1;
var resultInfHandle = sliceDataByPage(resultInf, currentPage);
publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
});
$(".page-num-last").on('click', function () {
var currentPage = totalPageNumFind;
var resultInfHandle = sliceDataByPage(resultInf, currentPage);
publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
});
$(".page-num-prev").on('click', function () {
var currentPage = parseInt($("#currentNumSelected").text()) || 1;
currentPage = currentPage - 1;
if (currentPage < 1) {
currentPage = 1;
}
var resultInfHandle = sliceDataByPage(resultInf, currentPage);
publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
});
$(".page-num-next").on('click', function () {
var currentPage = parseInt($("#currentNumSelected").text()) || 1;
currentPage = currentPage + 1;
if (currentPage > totalPageNumFind) {
currentPage = totalPageNumFind
}
var resultInfHandle = sliceDataByPage(resultInf, currentPage);
publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
});
$(".page-num").on('click', function (event) {
var currentPage = parseInt($(event.target).text()) || 1;
var resultInfHandle = sliceDataByPage(resultInf, currentPage);
publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
})
}
function publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle) {
renderPaginationWithFind(currentPage, totalPageNumFind);
renderFilterHtml(resultInfHandle);
bindEventHandle(resultInf, totalPageNumFind);
}
// 对搜索结果内容进行分页,和普通的分页略有不同。之后会将两者合二为一
function renderPaginationWithFind(currentPage, totalNum) {
var currentPage = currentPage || 1, totalNum = totalNum, ulHtml = "", currentPageSelected;
$(".pagination").html(ulHtml);
ulHtml += '<li><a class="first-page page-num-first">第一页</a></li><li><a class="prev-page page-num-prev">上一页</a></li>';
for (var i = 0; i < totalNum; i++) {
var currentNum = i + 1;
if (currentPage == currentNum) {
currentPageSelected = "current-page-selected";
} else {
currentPageSelected = "";
}
ulHtml += '<li><a class="page-num" id="' + currentPageSelected + '">' + currentNum + '</a></li>';
}
ulHtml += '<li><a class="next-page page-num-next">下一页</a></li><li><a class="last-page page-num-last">最后一页</a></li>';
$(".pagination").html(ulHtml);
if (currentPage == 1) {
$(".page-num-prev").addClass("btn-not-allowed");
$(".page-num-first").addClass("btn-not-allowed");
}
if (currentPage == totalNum) {
$(".page-num-next").addClass("btn-not-allowed");
$(".page-num-last").addClass("btn-not-allowed");
}
}
</script>由于字数限制，只贴了最重要的部分，根据搜索框的内容查询并渲染html，第一次点击<a href="xxxx.html>查看</a> 或<a href="xxx.html">编辑</a> 页面不跳转 ,只要在搜索框输入完毕，并点击页面任意地方，再点击a标签，页面才跳转，这是为什么呢？有试着对a添加click，第一次点击，不执行，点击第二次，根据输出显示已经是执行第二次了，同样在在搜索框输入完毕，并点击页面任意地方，再点击a标签就能跳转。最后，当注释掉以下代码后，就一切正常了 ，blur: function (e) {
fnFindFilterData(e);
}
添加回答
举报
0/150
提交
取消