\u80cc\u666f\uff1a \u56e0\u4e3a\u9879\u76ee\u7279\u6b8a\u6027\uff0c\u5206\u9875\u529f\u80fd\uff0c\u540e\u53f0\u6ca1\u6cd5\u50cf\u5e38\u89c4\u65b9\u6cd5\u4e00\u6837\u4ece\u6570\u636e\u5e93\u5206\u9875\u67e5\u627e\u6570\u636e\u3002\u6240\u4ee5\u524d\u53f0\u4f1a\u83b7\u53d6\u6240\u6709\u7684\u6570\u636e\uff0c\u7136\u540e\u8fdb\u884c\u524d\u53f0\u5206\u9875\u3002\u5173\u952e\u5b57\u67e5\u8be2\u4e5f\u662f\u56e0\u4e3a\u4e0a\u8ff0\u539f\u56e0\uff0c\u7528\u7684\u662fjs\u81ea\u5e26\u7684indexOf()\u65b9\u6cd5\u3002<\/p>\n
\u4f7f\u7528\u7684\u63d2\u4ef6\u548c\u65b9\u6cd5\uff1a
\n1. ajax
\n2. handlerbars\u6a21\u677f\u5f15\u64ce
\n3. jQuery\u63d2\u4ef6\u5f00\u53d1\u8fc7\u7a0b<\/p>\n
\u4ee3\u7801\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n
html\u4ee3\u7801\uff1a<\/p>\n
<!-- \u6570\u636e\u5c55\u793a\u533a\u57df-->\r\n<table>\r\n <tbody id=\"margin-panel\"><\/tbody>\r\n<\/table>\r\n<div class=\"page\">\r\n <ul class=\"pure-paginator\">\r\n <li><a class=\"pure-button first\" href=\"javascript:void(0)\" data-page-index=\"1\">\u9996\u9875<\/a><\/li>\r\n <li><a class=\"pure-button prev\" href=\"javascript:void(0)\">\u4e0a\u4e00\u9875<\/a><\/li>\r\n <li class=\"pageBtnGroup\"><\/li>\r\n <!--\u7ffb\u9875\u6309\u94ae-->\r\n <li><a class=\"pure-button next\" href=\"javascript:void(0)\">\u4e0b\u4e00\u9875<\/a><\/li>\r\n <li><a class=\"pure-button last\" href=\"javascript:void(0)\" data-page-index=\"\">\u5c3e\u9875<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n<!-- \u6240\u9700\u8981\u7684\u6a21\u677f -->\r\n<script id=\"finamceStocks-template\" type=\"text\/x-handlebars-template\">\r\n{{#each stocksdata}}\r\n <tr>\r\n <td>{{id}}<\/td>\r\n <td>{{secCode}}<\/td>\r\n <td>{{secAbbr}}<\/td>\r\n <td>{{rate}}<\/td>\r\n <td>{{branch}}<\/td>\r\n <td>{{lastUpdateTime}}<\/td>\r\n <\/tr>\r\n{{\/each}}\r\n<\/script><\/pre>\njs\u4ee3\u7801\u90e8\u5206\uff1a<\/p>\n
*.render = function(data){\r\n $(\".pure-paginator\").paging({\r\n data : stocksdata, \/*\u6240\u6709\u6570\u636e*\/\r\n numBtnOnepage : 5, \/*\u5e26\u9875\u6570\u7684\u6309\u94ae\u6570\u91cf*\/\r\n numOnePage : 10, \/*\u6bcf\u9875\u663e\u793a\u6570\u636e*\/\r\n btnGroupLoc : \".pageBtnGroup\", \/*\u5e26\u9875\u6570\u6309\u94ae\u7ec4\u5bb9\u5668*\/\r\n tpl : \"#finamceStocks-template\", \/*\u6570\u636e\u5c55\u793a\u89c6\u56fe\u6a21\u677f*\/\r\n tplParam : \"stocksdata\", \/*\u89c6\u56fe\u6a21\u677f\u53c2\u6570\u5bf9\u8c61*\/\r\n dataLoc : \"#margin-panel\" \/*\u6570\u636e\u5c55\u793a\u5bb9\u5668*\/\r\n });\r\n}<\/pre>\n\u81ea\u5df1\u5199\u7684jquery\u63d2\u4ef6paging<\/p>\n
\/**\r\n * \u7ffb\u9875\r\n * created by wangdong\r\n * 2017\/01\/23\r\n * \r\n * \u6570\u636e\u4ece0\u5f00\u59cb\u8ba1\u6570\r\n * \u9875\u6570\u4ece1\u5f00\u59cb\u8ba1\u6570\r\n * \u5f53\u524d\u5bf9\u8c61\u662f\u6240\u6709\u6309\u94ae\u7ec4(\u5305\u62ec\u4e0a\u4e00\u9875\u3001\u4e0b\u4e00\u9875\u3001\u9996\u9875\u3001\u5c3e\u9875)\r\n * \r\n *\/\r\n(function($){\r\n jQuery.fn.paging = function(options){\r\n \/**\r\n @param data {json} \u6240\u6709\u7684\u6570\u636e\r\n @param numBtnOnePage {number} \u663e\u793a\u51e0\u4e2a\u5e26\u9875\u6570\u6309\u94ae\r\n @param numOnePage {number} \u6bcf\u9875\u663e\u793a\u51e0\u6761\u6570\u636e\r\n @param btnGroupLoc {selector} \u5e26\u9875\u6570\u6309\u94ae\u4f4d\u7f6e\r\n @param tpl {selector} \u89c6\u56fe\u6a21\u677f\r\n @param tplParam {string} \u89c6\u56fe\u6a21\u677f\u7684\u53c2\u6570\u5bf9\u8c61\r\n @param dataLoc {selector} \u89c6\u56fe\u663e\u793a\u4f4d\u7f6e\r\n *\/\r\n\r\n var defaults = {\r\n numBtnOnePage : 5, \/*\u9ed8\u8ba45\u4e2a\u7ffb\u9875\u6309\u94ae*\/\r\n numOnePage : 7, \/*\u9ed8\u8ba4\u663e\u793a7\u6761\u6570\u636e*\/\r\n };\r\n var opts = $.extend(defaults, options);\r\n opts.numBtnOnePage = Number(opts.numBtnOnePage);\r\n opts.numOnePage = Number(opts.numOnePage);\r\n\r\n var $this = $(this),\r\n $firstPageBtn = $this.find(\".pure-button.first\"), \/*\u9996\u9875*\/\r\n $lastPageBtn = $this.find(\".pure-button.last\") , \/*\u5c3e\u9875*\/\r\n $prevPageBtn = $this.find(\".pure-button.prev\") , \/*\u4e0a\u4e00\u9875*\/\r\n $nextPageBtn = $this.find(\".pure-button.next\") ; \/*\u4e0b\u4e00\u9875*\/\r\n\r\n if(opts.data){\r\n var dataLength = opts.data.length,\r\n pageCount = Math.ceil(dataLength\/opts.numOnePage); \/\/\u603b\u9875\u6570\r\n \/\/ \u4e3a\u4ea7\u54c1\u4e13\u533a\u6dfb\u52a0\u663e\u793a\u8bb0\u5f55\u548c\u9875\u6570\r\n $this.find(\".recordCount .num\").text(dataLength);\r\n $this.find(\".pageCount .num\").text(pageCount);\r\n if(dataLength == 0){\r\n $firstPageBtn.addClass(\"disabled\");\r\n $lastPageBtn.addClass(\"disabled\");\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n $(opts.dataLoc).html(\"\");\r\n $(opts.btnGroupLoc).html(\"\");\r\n $firstPageBtn.attr({\"data-page-index\": \"\"});\r\n $lastPageBtn.attr({\"data-page-index\": \"\"});\r\n return 0;\r\n }else {\r\n $firstPageBtn.removeClass(\"disabled\");\r\n $lastPageBtn.removeClass(\"disabled\");\r\n $prevPageBtn.removeClass(\"disabled\");\r\n $nextPageBtn.removeClass(\"disabled\");\r\n $firstPageBtn.attr({\"data-page-index\": 1});\r\n $lastPageBtn.attr({\"data-page-index\": pageCount});\r\n }\r\n\r\n }\r\n\r\n\r\n \/*\r\n * \u5207\u5272\u6570\u636e\r\n * @param {number} group \u7b2c\u51e0\u7ec4\u6570\u636e\r\n * @return {data} \u622a\u53d6\u4e4b\u540e\u7684\u6570\u636e\r\n *\/\r\n function sliceData(group){\r\n var result = opts.data.slice(0+opts.numOnePage*(group-1), opts.numOnePage+opts.numOnePage*(group-1));\r\n return result;\r\n }\r\n\r\n \/**\r\n * \u521b\u5efa\u7ffb\u9875\u6309\u94ae\uff0c\u521b\u5efa\u7684\u65b0\u7684\u7ffb\u9875\u89c6\u56fe\uff0c\u89c6\u65b9\u5411\u800c\u5b9a\uff0c\u9009\u4e2d\u7b2c\u4e00\u4e2a\u6216\u8005\u6700\u540e\u4e00\u4e2a\u6309\u94ae\r\n * @param {number} n \u4e3a\u7b2c\u51e0\u7ec4\u7ffb\u9875\u6309\u94ae\r\n * @param {string} direction \u7ffb\u9875\u65b9\u5411\r\n * @return {view} \u8fd4\u56de\u4e00\u4e2a\u89c6\u56fe\r\n *\/\r\n function pagingBtn(n, direction){\r\n if(direction == \"left\"){\r\n var lengthBtns = opts.numBtnOnePage;\r\n for(var i = 0, itemList=\"\"; i < lengthBtns; i++){\r\n if(i == lengthBtns-1){\r\n itemList = itemList + '<li><a class=\"pure-button pure-button-active nowPage\" href=\"javascript:void(0)\" data-page-index=\"'+Number(opts.numBtnOnePage*(n-1)+Number(i+1))+'\">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'<\/a><\/li>';\r\n }else{\r\n itemList = itemList + '<li><a class=\"pure-button\" href=\"javascript:void(0)\" data-page-index=\"'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'\">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'<\/a><\/li>';\r\n }\r\n }\r\n }\r\n if(direction == \"right\"){\r\n var remainPage = pageCount-opts.numBtnOnePage*(n-1);\r\n var lengthBtns = (opts.numBtnOnePage<remainPage)? opts.numBtnOnePage : remainPage;\r\n for(var i = 0, itemList = \"\"; i < lengthBtns; i++){\r\n if(i == 0){\r\n itemList = itemList + '<li><a class=\"pure-button pure-button-active nowPage\" href=\"javascript:void(0)\" data-page-index=\"'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'\">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'<\/a><\/li>';\r\n }else{\r\n itemList = itemList + '<li><a class=\"pure-button\" href=\"javascript:void(0)\" data-page-index=\"'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'\">'+Number(opts.numBtnOnePage*(n-1)+(i+1))+'<\/a><\/li>';\r\n }\r\n }\r\n }\r\n $(opts.btnGroupLoc).html(itemList);\r\n }\r\n\r\n \/**\r\n * [renderTpl description]\r\n * @param {selector} tpl \u6a21\u677f\u7684\u9009\u62e9\u5668\r\n * @param {json} pagedata \u9700\u8981\u6e32\u67d3\u7684\u6570\u636e\r\n * @return {view} \u8fd4\u56de\u89c6\u56fe\r\n *\/\r\n function renderTpl(tpl, pagedata, dataLoc){\r\n pagedata[opts.tplParam] = pagedata;\r\n var source = $(tpl).html();\r\n var template = Handlebars.compile(source);\r\n $(dataLoc).html(template(pagedata));\r\n }\r\n\r\n function bindEvent(){\r\n $this.off(\"click\", \".pure-button\").on(\"click\", \".pure-button\", function(){\r\n var $thisPage = $(this);\r\n if($thisPage.attr(\"data-page-index\")!=undefined&&$thisPage.attr(\"data-page-index\")!=\"\"){\r\n var thisPageIndex = $thisPage.attr(\"data-page-index\");\r\n var tempData = sliceData(thisPageIndex);\r\n tempData[opts.tplParam] = tempData;\r\n renderTpl(opts.tpl, tempData, opts.dataLoc);\r\n $thisPage.addClass(\"pure-button-active nowPage\")\r\n .parent().siblings().find(\"a\").removeClass(\"pure-button-active nowPage\");\r\n if($this.find(\"[data-page-index=\"+thisPageIndex+\"]\").length>1){\r\n $this.find(\"[data-page-index=\"+thisPageIndex+\"]\").addClass(\"pure-button-active nowPage\");\r\n $this.find(\"[data-page-index!=\"+thisPageIndex+\"]\").removeClass(\"pure-button-active nowPage\");\r\n }else {\r\n $firstPageBtn.removeClass(\"pure-button-active nowPage\");\r\n $lastPageBtn.removeClass(\"pure-button-active nowPage\");\r\n }\r\n if(pageCount == 1){\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n }else {\r\n if(thisPageIndex == 1) {\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.removeClass(\"disabled\");\r\n }else if(thisPageIndex == pageCount){\r\n $prevPageBtn.removeClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n }else {\r\n $prevPageBtn.removeClass(\"disabled\");\r\n $nextPageBtn.removeClass(\"disabled\");\r\n }\r\n }\r\n }\r\n });\r\n $this.off(\"click\", \".pure-button.prev,.pure-button.next\")\r\n .on(\"click\", \".pure-button.prev,.pure-button.next\", function(){\r\n var $pageSwitch = $(this);\r\n if($pageSwitch.hasClass(\"disabled\")){\r\n return 0;\r\n }else {\r\n var currentPage = $(opts.btnGroupLoc).find(\".pure-button-active.nowPage\");\r\n var currentPageIndex = currentPage.attr(\"data-page-index\");\r\n if($pageSwitch.hasClass(\"prev\")){\r\n var prevPageIndex = currentPageIndex - 1;\r\n if(currentPageIndex%opts.numBtnOnePage == 1){\r\n var nGroup = Math.floor(currentPageIndex\/opts.numBtnOnePage);\r\n pagingBtn(nGroup, \"left\");\r\n renderTpl(opts.tpl, sliceData(prevPageIndex), opts.dataLoc);\r\n $nextPageBtn.removeClass(\"disabled\");\r\n }else{\r\n $this.find(\"[data-page-index=\"+currentPageIndex+\"]\").removeClass(\"pure-button-active nowPage\");\r\n $this.find(\"[data-page-index=\"+prevPageIndex+\"]\").addClass(\"pure-button-active nowPage\");\r\n renderTpl(opts.tpl, sliceData(prevPageIndex), opts.dataLoc);\r\n $nextPageBtn.removeClass(\"disabled\");\r\n if(prevPageIndex == 1){\r\n $prevPageBtn.addClass(\"disabled\");\r\n }\r\n }\r\n }else if($pageSwitch.hasClass(\"next\")){\r\n var nextPageIndex = Number(currentPageIndex) + 1;\r\n if(currentPageIndex%opts.numBtnOnePage == 0){\r\n var nGroup = Math.floor(Number(currentPageIndex\/opts.numBtnOnePage)+1);\r\n pagingBtn(nGroup, \"right\");\r\n renderTpl(opts.tpl, sliceData(nextPageIndex), opts.dataLoc);\r\n }else{\r\n $this.find(\"[data-page-index=\"+currentPageIndex+\"]\").removeClass(\"pure-button-active nowPage\");\r\n $this.find(\"[data-page-index=\"+nextPageIndex+\"]\").addClass(\"pure-button-active nowPage\");\r\n renderTpl(opts.tpl, sliceData(nextPageIndex), opts.dataLoc);\r\n $prevPageBtn.removeClass(\"disabled\");\r\n }\r\n if(nextPageIndex == pageCount){\r\n $nextPageBtn.addClass(\"disabled\");\r\n }\r\n }\r\n }\r\n });\r\n $this.off(\"click\", \".pure-button.first,.pure-button.last\")\r\n .on(\"click\", \".pure-button.first,.pure-button.last\", function(){\r\n var $pageBothEnd = $(this),\r\n currentPage = $pageBothEnd.attr(\"data-page-index\");\r\n if(currentPage!=\"\"){\r\n if($pageBothEnd.hasClass(\"first\")){\r\n if($(opts.btnGroupLoc).filter(\"li:first\").children(\"a\").attr(\"data-page-index\")==1){\r\n return 0;\r\n }else {\r\n pagingBtn(1, \"right\");\r\n $this.find(\"[data-page-index=1]\").addClass(\"pure-button-active nowPage\");\r\n $this.find(\"[data-page-index!=1]\").removeClass(\"pure-button-active nowPage\");\r\n $prevPageBtn.addClass(\"disabled\");\r\n }\r\n }else if($pageBothEnd.hasClass(\"last\")){\r\n if($(opts.btnGroupLoc).find(\"li:last\").children(\"a\").attr(\"data-page-index\")==pageCount){\r\n return 0;\r\n }else {\r\n pagingBtn(Math.ceil(pageCount\/opts.numBtnOnePage), \"right\");\r\n $this.find(\"[data-page-index=\"+pageCount+\"]\").addClass(\"pure-button-active nowPage\");\r\n $this.find(\"[data-page-index!=\"+pageCount+\"]\").removeClass(\"pure-button-active nowPage\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n } \r\n }\r\n }\r\n });\r\n } \r\n\r\n \/*\u51fd\u6570\u6267\u884c\u5165\u53e3*\/\r\n $firstPageBtn.removeClass(\"pure-button-active nowPage\");\r\n $lastPageBtn.removeClass(\"pure-button-active nowPage\");\r\n $prevPageBtn.removeClass(\"disabled\");\r\n $nextPageBtn.removeClass(\"disabled\");\r\n pagingBtn(1, \"right\");\r\n $firstPageBtn.addClass(\"pure-button-active nowPage\");\r\n renderTpl(opts.tpl, sliceData(1), opts.dataLoc);\r\n if(pageCount == 1){\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n $firstPageBtn.addClass(\"pure-button-active nowPage\");\r\n $lastPageBtn.addClass(\"pure-button-active nowPage\");\r\n bindEvent();\r\n }else if(pageCount == 0){\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n $prevPageBtn.addClass(\"disabled\");\r\n $nextPageBtn.addClass(\"disabled\");\r\n }else{\r\n $prevPageBtn.addClass(\"disabled\");\r\n bindEvent();\r\n }\r\n\r\n } \r\n})(jQuery);<\/pre>\n\u603b\u7ed3\uff1a\u6839\u636e\u8bbe\u7f6e\u7684\u6bcf\u9875\u663e\u793a\u7684\u6761\u6570\u548c\u6bcf\u9875\u8981\u663e\u793a\u7684\u9875\u6570\uff0c\u5207\u5272\u83b7\u53d6\u6765\u7684data\uff0c\u7ed8\u5236\u9875\u9762\u548c\u7ed8\u5236\u65b0\u7684\u6309\u94ae\u7ec4\u3002<\/p>\n
\u524d\u7aef\u641c\u7d22\u4e5f\u662f\u5bf9json\u8fdb\u884c\u64cd\u4f5c\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u4ec5\u9002\u7528\u76f8\u5173\u5b57\u6bb5\u201dsecCode\u201d\u548c\u201dsecAbbr\u201d<\/p>\n
function newsSelect(keyword, jsonData) {\r\n if (keyword == \"\") {\r\n return jsonData;\r\n } else {\r\n for (var i = 0; i < jsonData.length; {\r\n if (jsonData[i].secCode.indexOf(keyword) > -1 || jsonData[i].secAbbr.indexOf(keyword) > -1) {\r\n i++;\r\n } else {\r\n jsonData.splice(i, 1);\r\n }\r\n }\r\n return jsonData;\r\n }\r\n}<\/pre>\n\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » ajax\u83b7\u53d6\u6240\u6709\u6570\u636e\uff0c\u524d\u53f0\u5206\u9875\uff0c\u641c\u7d22<\/a><\/p>","protected":false},"excerpt":{"rendered":"\u80cc\u666f\uff1a \u56e0\u4e3a\u9879\u76ee\u7279\u6b8a\u6027\uff0c\u5206\u9875\u529f\u80fd\uff0c\u540e\u53f0\u6ca1\u6cd5\u50cf\u5e38\u89c4\u65b9\u6cd5\u4e00\u6837\u4ece\u6570\u636e\u5e93\u5206\u9875\u67e5\u627e\u6570\u636e\u3002\u6240\u4ee5\u524d\u53f0\u4f1a\u83b7\u53d6\u6240\u6709\u7684\u6570\u636e\uff0c\u7136\u540e\u8fdb\u884c\u524d\u53f0\u5206\u9875\u3002\u5173\u952e\u5b57\u67e5\u8be2\u4e5f\u662f\u56e0\u4e3a\u4e0a\u8ff0\u539f\u56e0\uff0c\u7528\u7684\u662fjs\u81ea\u5e26\u7684indexOf()\u65b9\u6cd5\u3002 \u4f7f\u7528\u7684\u63d2 […]<\/p>\n","protected":false},"author":1,"featured_media":93,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[8],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/605"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=605"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":606,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/605\/revisions\/606"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/93"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}