<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); }