关于JQuery.pager分页的问题,请各个大侠帮忙看看!
问题:
把数据(json格式)总记录读出来后,给jquery.pager的pagecount参数成功,但是有多少条数据就有多少个页面,没有分页列表,如果有64条数据,就会有64页,要如何才能按每页9条数据进行分页呢。总页数和总记录是什么配置的,谢谢!
JQ代码
<script type="text/javascript"> var count = ""; //统计总记录 function RecordCount() { $.ajax({ dataType: "json", url: "WebService.asmx/XmltoJson", contentType: "application/json;", type: "POST", success: function (xml) { var json = eval('(' + xml.d + ')'); $("#txtCount").val($(json.jinshu.item).length); } }); } //输出数据 function InitData(pageclickednumber) { $.ajax({ dataType: 'json', url: "WebService.asmx/XmltoJson", contentType: "application/json;", //data: { pageindex: pageclickednumber }, type: "POST", success: function (xml) { var tbody = ""; var json = eval('(' + xml.d + ')'); $("#txtCount").val($(json.jinshu.item).length); $.each(json.jinshu.item, function (i, n) { var str = ""; str += "<tr><td>" + n["@newsid"] + "</td><td>" + n["@newstitle"] + "</td><td>" + n["@url"] + "</td><td>" + n["@auditortime"] + "</td><td>" + n["@newssort"] + "</td></tr>"; tbody += str; }); $("#TBODY").append(tbody); } }); } //初始化 $(document).ready(function () { RecordCount(); $("#pager").pager({ pagenumber: 1, pagecount: $("#txtCount").val(), buttonClickCallback: PageClick }); PageClick(1); }); //回调分页 PageClick = function (pageclickednumber) { $("#pager").pager({ pagenumber: pageclickednumber, pagecount: $("#txtCount").val(), buttonClickCallback: PageClick }); InitData(pageclickednumber); } </script>
(function($) { $.fn.pager = function(options) { var opts = $.extend({}, $.fn.pager.defaults, options); return this.each(function() { // empty out the destination element and then render out the pager with the supplied options $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback)); // specify correct cursor activity $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); }); }; // render and return the pager with the supplied options function renderpager(pagenumber, pagecount, buttonClickCallback) { // setup $pager to hold render var $pager = $('<ul class="pages"></ul>'); // add in the previous and next buttons $pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback)); // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases var startPoint = 1; var endPoint = 9; if (pagenumber > 4) { startPoint = pagenumber - 4; endPoint = pagenumber + 4; } if (endPoint > pagecount) { startPoint = pagecount - 8; endPoint = pagecount; } if (startPoint < 1) { startPoint = 1; } // loop thru visible pages and render buttons for (var page = startPoint; page <= endPoint; page++) { var currentButton = $('<li class="page-number">' + (page) + '</li>'); page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); }); currentButton.appendTo($pager); } // render in the next and last buttons before returning the whole rendered control back. $pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback)); return $pager; } // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) { var $Button = $('<li class="pgNext">' + buttonLabel + '</li>'); var destPage = 1; // work out destination page for required button type switch (buttonLabel) { case "first": destPage = 1; break; case "prev": destPage = pagenumber - 1; break; case "next": destPage = pagenumber + 1; break; case "last": destPage = pagecount; break; } // disable and 'grey' out buttons if not needed. if (buttonLabel == "first" || buttonLabel == "prev") { pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); } else { pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); } return $Button; } // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version $.fn.pager.defaults = { pagenumber: 1, pagecount: 1 };})(jQuery);
<body> <input id="txtCount" type="text" readonly="readonly"/><table><thead><tr><th>NEWSID</th><th>NEWSTITLE</th><th>URL</th><th>AUDITORTIME</th><th>NEWSSORT</th></tr></thead><tbody id="TBODY"> </tbody></table><div id="pager" ></div></body>