<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); }
RedJoyy
相关分类