Позвольте мне сначала показать вам визуализации. Если вы чувствуете, что эффект хороший, пожалуйста, обратитесь к коду реализации:
Поскольку я впервые пишу пейджинг в JS, письмо не должно быть идеальным. Некоторые публичные не извлечены, но они все еще можно использовать. Этот код можно рассматривать как общественную пейджинг. Я использовал этот код, чтобы написать два чуть разные пьесы! Общие извлечения кода аналогичны, главным образом потому, что фон AJAX и возвращенные значения различны. Пока общий номер страницы получается, и нажмите на домашнюю страницу/следующую страницу, чтобы правильно передать значение, в основном не возникнет никаких проблем с страницей.
В Интернете действительно есть много плагинов подкисления и кодов с открытым исходным кодом. Одиночная книга - это бэкэнд -обезьяна, а Frontend CSS и другие стили все еще неконтролируемые, поэтому я начал писать его сам. На самом деле, принцип пейджинг очень прост. Он должен использовать Ajax для передачи значений (номера текущего номера страницы) на фон и использовать предел для их страниц в фоновом режиме.
Без лишних слов просто загрузите код!
Примечание. Этот проект написан с использованием JS на протяжении всего процесса. Данные на стойке регистрации получают через AJAX, а затем динамически собираются и загружаются на страницу.
1. Сначала прикрепите коды предыдущей страницы, следующей страницы и т. Д. (Все значения являются псевдо значениями, и следующее будет переназначено в JS!)
<ul id="page"><li id="shouye"><a href='javascript:indexpage(1);'>Home</a></li><li id="shangyiye" ><a href='javascript:indexpage(-1);'><i></i>Previous page</a></li><li><a id="one" href = "javascript: void (0);" > 1 </a> </li> <li> <a id = "два" href = "javaScript: void (0);" > 2 </a> </li> <li> <a id = "three" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "three" href = "javascript: void (0);" > 3 </a> </li> <li> <a id = "пять" href = "javaScript: void (0);" > ... </a> </li> <li> <a id = "fore" href = "javascript: void (0);" > 13855 </a> </li> <li class = 'p-next'> <a href = 'javascript: indexpage (-3);' onclick = "jumptopage ('2', '/good/ajaxquerygoodslist.do.html', '', 'GoodsListContainer', '13855', listPageCallback);"> Следующая страница <i> </i> </a> </li> <li> <li id = "weiye". href = 'javascript: void (0);' onclick = "indexpage (0);"> Последняя страница </a> </li> <li> <span ID = "span_number"> Итого 13 855 страниц для <input type = "text" id = "input_number"/> page <input name = "" value = "идентифицировать" type = " onclick = "jumptopage (jquery ('#input_number'). val (), '/govel/ajaxquerygoodslist.do.html', '', 'GoydListContainer', '13855', listPageCallback);"/> </span> </li> </ul>2. Сначала поместите два скрытых поля на страницу, одно - это текущий номер страницы, а другой - общий номер страницы. Общий номер страницы загружается страницей, и значение напрямую прикреплено после запроса с фона. Если нет работы текущего номера страницы, вы должны присвоить значение номеру текущего страницы.
<input id = "jiazai" type = "hidden"> </input> <!-Номер текущей страницы-> <input id = "totalPage" type = "hidden"> </input> <!-Общий номер страницы->
3. Напишите функцию, которая была загружена на странице, и присваивайте значения общему номеру страницы и текущему номеру страницы.
$ (function () {$ ('#jiazai'). val (1); // Присвоение текущему номеру страницы, по умолчанию является ajaxfunction (page, arg, chipssort, ''); // Этот метод является извлеченным методом фонового доступа Ajax});4. Извлеченный метод Ajax. Эта страница будет использовать этот метод несколько раз, и все это собирается, потому что данные страницы получаются из фона через AJAX, а фон возвращает сбор списков.
// Метод извлечения функции AJAX AjaxFunction (Page, Arg, CHIPSSORT, FONTVAL) {$. Данные: {Страница: Страница, сортировка: arg, chipssort: chipsort, fontval: fontval}, dataType: 'json', contentType: 'Application/xwww-form-urlencoded; CommonFunction (data);}});}3. Есть не так много кодов, чтобы увидеть, последний
// метод извлечения строковой функции орфографии Commonfunction (data) {$ ('#ProjectList'). Найти ("li"). Remove (); for (var i = 0; i <data.length; i ++) {/*****, потому что эта страница загружается динамически, в основном выполняет строковое орфографию, и есть много кода, так что это не так и не принимает пространство /***. Ядро страх страницы if (data.length> 0) {// Установить номер страницы var pading = data [0] .padingnum; // Общее число страниц $ ('#totalpage'). val (pading); var page = $ ('#jiazai'). val (); // текущая страница $ ('#countpage'). id = 'currentPageno'> "+page+" </b>/"+pading+" "); $ ('#span_number'). html (" total "+pading+" page to <input type = 'text' id = 'input_number' class = 'page-txtbox'/> page <name = '' value = 'type =' кнопка 'class =' page-txtbox '/> onclick = 'indexpage (-2)'/goods/ajaxquerygoodslist.do.html ',' ',' goodslistcontainer ',' "+pading+" ', listpagecallback);' class = 'page-btn'/> ")} else {$ ('#count-page'). html (" <b id = 'currentpageno'> "+0+" </b>/"+0+" ");} // нижняя страница настройки-домашняя страница 1 2 3 4 5 6 Последняя страница var pading = data [0] .padingnum; href = "javascript: void (0);" var nowpage = $ ('#jiazai'). val (); // текущая страница // одна три три пять Fore <br> // Следующий код выглядит более неприятным, но не сложно понять, что это все то же самое, но он просто добавил некоторые суждения, если (теперь страница <5 ) {$ ('#One'). Text (1); $ ('#One'). ATTR ('href', 'javascript: pagenum ("'+1+'");'); $ ('#2'). Text (2); $ ('#два'). ATTR ('href', 'javascript: pagenum ('+(2)+') (3); $ ('#three'). Attr ('href', 'javascript: pagenum ("'+(3)+'");'); $ ('#пять'). Текст (4); $ ('#пять'). A ttr ('href', 'javascript: pagenum ("'+(4)+'");'); $ ('#fore'). Text (5); $ ('#fore'). Text (5); $ ('#fore'). e '). attr (' href ',' javascript: pagenum ("'+(5)+'"); '); $ ('#five '). Parent (). Show (); $ ('#fore '). Parent (). Show ();} else {// alert («Это больше не пятая страница»); // Средняя на текущую страницу $ (#). owpage) -2); $ ('#One'). attr ('href', 'javascript: indexpage ("'+(number (ownpage) -2)+'");'); $ ('#два'). Text (number page) -1); +(Number (nowpage) -1)+'");'); $ ('#three'). Text (nowpage); $ ('#three'). Attr ('href', 'javascript: indexpage ("'+(nowpage)+'");'); $ ('#пять'). Parent () show (). превышает общее количество страниц if (number (nowpage) +1> pading) {$ ('#five'). parent (). hide (); $ ('#fore'). Parent (). Hide ();} else {$ ('#пять'). Parent (). Show (); $ ('#пять'). owpage) +1); $ ('#five'). attr ('href', 'javascript: indexpage ("'+(number (wylpage) +1)+'");');} // судить о том, превышает ли вторая страница следующей страницы общее число страниц, если (число (сейчас page) +2> pading) ($ word '). lse {$ ('#fore'). parent (). show (); $ ('#fore'). Text (number (nowpage) +2); $ ('#fore'). attr ('href', 'javascript: indexpage ("'+(число (nowpage) +2)+'");}} // Если общее число из пейзаж меньше 5, это 5, что 5, это 5, что 5, это 5. Показать и скрыть if (pading == 0) {$ ('#One'). Parent (). Hide (); $ ('#два'). Parent (). Hide (); $ ('#Three'). Parent (). Hide (); $ ('#пять'). Parent (). Hide (); $ ('#fore'). Parent (). if (pading == 1) {$ ('#shouye'). hide (); $ ('#weiye'). Hide (); $ ('#One'). Parent (). Hide (); $ ('#два'). Parent (Parent (' ) .hide (); $ ('#three'). Parent (). Hide (); $ ('#Five'). Parent (). Hide (); $ ('#fore'). Parent (). Hide ();} else if (pading == 2) {$ ('#One'). Parent (). Show (); $ ('#2'). Parent (). Show (); $ ('#Three'). Parent (). Hide (); $ ('#five'). Parent (). Hide (); $ ('#fore'). Parent (). Hide ();} Else if (pading == 3) {$ ('#One'). Parent (). Show (); $ ('#два'). Parent (). Show (); $ ('#Three'). Parent (). Show (); $ ('#five'). Parent (). Hide (); $ ('#fore'). Parent (). Hide ();} Else if (pading == 4) {$ ('#One'). Parent (). Show (); $ ('#два'). Parent (). Show (); $ ('#Three'). Parent (). Show (); $ ('#пять'). Parent (). Show () ('#fore'). Parent (). Hide ();} else ('##One'). ) .parent (). show (); $ ('#2'). parent (). show (); $ ('#three'). Parent (). Show (); $ ('#пять'). Parent (). Show (); $ ('#fore'). Parent (). Show ();} // установлен, что IS IS, 1 на первой странице, а 2 находится на второй странице. a '). Каждый (function () {$ (this) .parent (). removeClass ("current"); if ($ (this) .text () == wylpage) {$ (this) .parent (). addClass ("current");}}); // вернуться в верхнюю часть страницы после Paging $ ("html, body"). Наконец, добавьте 1 $ ('#jiazai'). Val (номер (Bianlaing)+номер (1)); }Хорошо, страница заполнена здесь. Если вам нужно его использовать, может потребоваться некоторое время, чтобы понять мой код. На самом деле, код не сложно. Я использовал его в течение двух часов, чтобы написать. Просто прочитайте это одну строчку за одной и добавьте комментарии самостоятельно. Проведите этот кусок, и это определенно будет сделано в течение получаса!