اسمحوا لي أن أريكم العروض أولا. إذا شعرت أن التأثير جيد ، فيرجى الرجوع إلى رمز التنفيذ:
لأن هذه هي المرة الأولى التي أكتب فيها الترحيل في JS ، يجب ألا تكون الكتابة مثالية. لم يتم استخراج بعض العمودين ، لكنهم ما زالوا على ما يرام للاستخدام. يمكن التعامل مع هذا الرمز كترحيل عام. لقد استخدمت هذا الرمز لكتابة اثنين من الترحيل المختلفة قليلاً! تتشابه مستخلصات التعليمات البرمجية الشائعة ، وذلك أساسًا لأن خلفية AJAX والقيم التي تم إرجاعها مختلفة. طالما تم الحصول على رقم الصفحة الإجمالي وانقر على الصفحة الرئيسية/الصفحة التالية لتمرير القيمة بشكل صحيح ، لن تكون هناك مشكلة في الأساس.
هناك بالفعل العديد من المكونات الإضافية للترحيل ورموز المصدر المفتوحة على الإنترنت. كتاب واحد هو قرد تطوير الواجهة الخلفية ، ولا تزال الواجهة الأمامية والأنماط الأخرى غير قابلة للتحكم ، لذلك بدأت في كتابتها بنفسي. في الواقع ، مبدأ الترحيل بسيط للغاية. إنه لاستخدام 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> page </a> HREF = "JavaScript: void (0) ؛" > 1 </a> </li> <li> <a id = "two" 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 = "five" 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' ، '/gouds/ajaxquerygoodslist.do.html' ، '' ، 'goodlistcontainer' ، '13855' ، listpageCallback) ؛ 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 = "button" OnClick = "Jumptopage (jQuery ('#input_number'). val () ، '/gouds/ajaxquerygoodslist.do.html' ، '' ، 'goodlistcontainer' ، '13855' ، listpagecallback) ؛"/> </li> </ul>2. وضع أول حقلين مخفيين على الصفحة ، أحدهما هو رقم الصفحة الحالي والآخر هو رقم الصفحة الإجمالي. رقم الصفحة الإجمالي هو تحميل الصفحة ويتم إرفاق القيمة مباشرة بعد الاستعلام من الخلفية. إذا لم تكن هناك عملية رقم الصفحة الحالية ، فيجب عليك تعيين القيمة إلى رقم الصفحة الحالي.
<input id = "jiazai" type = "hidden"> </pected> <!-رقم الصفحة الحالي-> <input id = "totalpage" type = "hidden"> </input> <!-إجمالي رقم الصفحة->
3. اكتب وظيفة تم تحميلها على الصفحة وتعيين القيم إلى رقم الصفحة الإجمالي ورقم الصفحة الحالي.
$ (function () {$ ('#jiazai'). val (1) ؛ // تعيين رقم الصفحة الحالي ، الافتراضي هو ajaxfunction (الصفحة ، arg ، chipssort ، '') ؛ // هذه الطريقة هي طريقة الوصول إلى خلفية Ajax المستخرجة}) ؛4. استخلاص طريقة AJAX. ستستخدم هذه الصفحة هذه الطريقة عدة مرات ، ويتم جمعها جميعها لأن بيانات الصفحة يتم الحصول عليها من الخلفية من خلال AJAX ، وإرجاع الخلفية مجموعة قائمة.
. البيانات: {الصفحة: الصفحة ، الفرز: arg ، chipssort: chipsort ، fontval: fontval} ، datatype: 'json' ، contentType: 'application/x-www-form-urlencoded CommonFunction (البيانات) ؛}}) ؛}3. لا يوجد العديد من الرموز التي يمكن رؤيتها ، آخرها
. هل جوهر ترقيم الأسطح إذا (data.length> 0) {// تعيين رقم الصفحة var pading = data [0] .padingNum ؛ // إجمالي رقم الصفحة $ ('#totalpage'). val (pading) ؛ var page = $ ('#jiazai'). val () ؛ // page $ $ ('#countpage') id = 'currentpageno'> "+page+" </b>/"+pading+" ") ؛ $ ('#span_number'). OnClick = 'IndexPage (-2)'/goods/ajaxquerygoodslist.do.html '،' '،' goodlistcontainer '، "+pading+"' ، listpagecallback) ؛ " class = 'page-btn'/> ")} آخر {$ ('#countpage'). html (" <b id = 'currentpageno'> "+0+" </b>/"+0+" ") href = "javaScript: void (0) ؛" var nowpage = $ ('#jiazai'). val () ؛ ) {$ ('#one'). text (1) ؛ $ ('#one'). attr ('href' ، 'javaScript: pagenum ("'+1+'") ؛') ؛ $ ('#two'). text (2) ؛ $ ('#اثنين) (3) ؛ $ ('##ثلاثة'). 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)+'") ؛ ') ؛ $ ('#خمسة '). parent (). show () ؛ $ ('#fore '). parent (). show () ؛ owpage) -2) ؛ $ ('#واحد'). attr ('href' ، 'javaScript: indexpage ("'+(number (nowpage) -2)+'") ؛') ؛ $ ('#two'). text (number (nowpage) -1) ؛ $ ('#two'). attr ('href' +(Number (nowpage) -1)+'") ؛') ؛ $ ('#three'). النص (الآن page) ؛ $ ('#ثلاثة'). attr ('href' ، 'javaScript: indexPage (' '+(nowpage)+'") ؛ ') ؛ $ ('#five '). الأصل () يتجاوز إجمالي عدد الصفحات إذا (الرقم (nowpage) +1> pading) {$ ('#خمسة'). parent (). hide () ؛ $ (' owpage) +1) ؛ $ ('#خمسة'). attr ('href' ، 'javaScript: indexPage ("'+(number (nowpage) +1)+'") ؛') ؛} // judge regive ما إذا كانت الصفحة الثانية من الصفحة التالية تتجاوز العدد الإجمالي للصفحات إذا (numpage) +2> pading) {$ ( LSE {$ ('#fore'). parent (). show () ؛ $ ('#fore'). النص (رقم (الآن page) +2) ؛ $ (' وإخفاء if (pading == 0) {$ ('#one'). parent (). hide () ؛ $ ('#two'). parent (). hide () ؛ $ ('##'). parent (). hide () ؛ $ ('#خمسة'). parent (). hide () ؛ $ (' if (pading == 1) {$ ('#shouye'). Hide () ؛ $ ('#weiye'). Hide () ؛ $ ('#one'). parent (). Hide () ؛ $ ('#two'). الوالدين ( ).hide();$('#three').parent().hide();$('#five').parent().hide();$('#fore').parent().hide();}else if (pading == 2) {$ ('#one'). parent (). show () ؛ $ ('#two'). Parent () if (pading == 3) {$ ('#one'). parent (). show () ؛ $ ('#two'). parent (). show () ؛ $ ('#three'). parent () if (pading == 4) {$ ('#one'). parent (). show () ؛ $ ('#two'). parent (). show () ؛ $ ('#three'). parent (). show () ؛ $ ('#خمسة'). parent () ) .parent (). show () ؛ $ ('##'). parent () a '). كل (function () {$ (this) .parent (). removeClass ("current") ؛ if ($ (this) .text () == nowpage) {$ (this) .parent (). addClass ("current") ؛ 500) ؛ // أخيرًا ، أضف 1 $ ('#jiazai'). val (الرقم (bianlaing)+رقم (1)) ؛ }حسنًا ، تم الانتهاء من الصفحة هنا. إذا كنت بحاجة إلى استخدامه ، فقد يستغرق الأمر بعض الوقت لفهم الكود الخاص بي. في الواقع ، فإن الكود ليس صعبًا. لقد استخدمته لمدة ساعتين لكتابته. فقط اقرأه سطرًا واحدًا ، وأضف التعليقات بنفسك. احصل على هذه القطعة ، وسيتم بالتأكيد في غضون نصف ساعة!