تعمل بنية جافاي ثلاثية الطبقات على استفسار صفارة ترقيم صفحات Ajax
بيئة التنمية:
الخطوة 1: إعداد تنفيذ الكود
هناك العديد من المنشورات على الإنترنت عند تطوير عمل التكوين الأولي في الفكرة ، لذلك لن أكررها هنا. أنا أتحدث بشكل رئيسي عن ثلاث نقاط.
في تكوين الخادم ، تحتاج إلى تحديد فئات التحديث والموارد للعنصرين في المربع الأحمر. بعد الاختيار ، يمكنك تحقيق النشر الساخن.
لملء اسم المشروع هنا. كمسار الجذر للمشروع
يتم عرض طريقة استيراد حزمة الجرة في الشكل. انقر فوق علامة Plus Derence وحدد مجلد Lib الذي أنشأته.
استيراد حزم الجرة ذات الصلة: حزمة جرة C3P0 ، حزمة جرة فئة أدوات DBUTILS ، حزمة جرة Fastjson ، حزمة سائق MySQL
اكتب البيانات التالية في جدول المنتج من اختبار قاعدة البيانات 03
من الباطن التعاقد مع المشروع في الفكرة واستيراد تكوين تجمع اتصال C3P0
لاحظ أنه يجب تعديل ملف تكوين C3P0 إلى اسم قاعدة البيانات الخاص به وكلمة مرور قاعدة البيانات
في حزمة المجال ، قم بإنشاء فئة كيان المنتج ، اكتب الخصائص المقابلة في فئة المنتج استنادًا إلى حقول جدول المنتج في قاعدة البيانات. توليد طريقة GET SET.
قم بإنشاء فئة أدوات للحصول على كائنات تجمعات الاتصال
الخطوة 2: الاستعلام عن جميع معلومات المنتج دون ترحيل
أفكار التنفيذ:
JSP/HTML -----> SERDLES (طبقة الويب مقابلة بيانات الطلب والاستجابة) -----------------> الخدمة (منطق معالجة طبقة الخدمة) -------------------> DAO (عمليات قاعدة بيانات DAO Layer)
قم بإنشاء صفحة منتج وأرسل طلبًا إلى الخادم (احصل على جميع معلومات المنتج)
يستخدم الواجهة الأمامية تطوير Bootstrap المستجيب ، والذي يمكن أن يجعل الصفحة أكثر جمالا والتطور أكثر ملاءمة.
رمز معلومات الصفحة كما يلي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> قائمة عرض المنتج </title> <!-تقديم ملفات ذات صلة بوتستراب-> <link rel = "stylesheet" href = "/ajax_product/bootstrap/csss rel = "nofollow"> <script type = "text/javaScript" src = "/ajax_product/bootstrap/js/jquery-1.11.3.js"> </script> <script type = "text/javascript" src = ajax_product/boottrap/js type = "text/javaScript"> // عند تحميل الصفحة ، يتم إرسال طلب إلى الخادم لتلقي جميع بيانات المنتج $ (function () { // ====================================================================================سف =========================================================================================================================================== =========================================================================================================================================== ================================================================================================================================================= // تحليل جميع البيانات المنقولة من الخادم // ==================================================== عرض معلومات المنتج إلى Products = eval (data) ؛ var protd = $ ("<tr> <td>"+منتجات [i] .id+"</td> <td>"+منتجات [i] $ ("#tab"). إلحاق (protd) ؛ id = "tab"> <tr> <th> الرقم </th> <th> اسم المنتج </th> <th> الكمية </th> <th> كمية المنتج </th> <th> سعر وحدة المنتج </th> </tr> </table> </div>إنشاء servlet لتلقي الطلبات والحصول على جميع معلومات المنتج
في الفكرة ، قم بإنشاء servlet كما هو موضح في الشكل التالي
توليد التعليقات التوضيحية تلقائيًا دون التحقق هنا
بعد النقر فوق "موافق" ، ستقفز IDEA تلقائيًا إلى ملف web.xml ، وتكتب تلقائيًا اسم المسار الكامل لـ Servlet ، ما عليك سوى كتابة عنوان URL.
لاحظ أن نماذج URL يجب أن تتوافق مع Servlet في طلب Ajax.
رمز Servlet لعلم طبقة الويب كما يلي:
package com.thc.web ؛ import com.alibaba.fastjson.jsonobject ؛ import com.thc.service.productService ؛ import javax.servlet.servletexception ؛ import javax.servlet.http.httpservlet ؛ import javax.servlet.http.httplet javax.servlet.http.httpservletresponse ؛ استيراد java.io.ioException ؛ استيراد java.sql.sqlexception ؛ استيراد java.util.list request code request.setcharacterencoding ("UTF-8") ؛ استجابة. // لأنه يعرض جميع معلومات المنتج ، لا توجد معلمة لتلقي // تحتاج طبقة الخدمة إلى استدعاء الطريقة للعثور على جميع البيانات ، والحصول على النتيجة ، والاستجابة لخدمة العميل Productservice = New Productervice () ؛ حاول {// استدعاء أساليب طبقة العمل للحصول على جميع قائمة المنتجات <com.thc.domain.product> allprouct = service.findallprouct () ؛ // قم بتحويل البيانات التي تم الحصول عليها إلى سلسلة بيانات نوع JSON JSORNORD = JSONOBJECT.TOJSORNING (allprouct) ؛ // اكتب مرة أخرى إلى استجابة المتصفح. } catch (sqlexception e) {E.PrintStackTrace () ؛ }} doget void doget (httpservletrequest request ، httpservletresponse) يلقي servletexception ، ioException {dopost (request ، response) ؛ }}في طبقة الخدمة ، احصل على بيانات من طبقة DAO وأعيدها إلى Servlet في طبقة الويب
رمز الاتصال بطبقة الخدمة في طبقة الويب كما يلي
package com.thc.service ؛ استيراد com.thc.dao.productdao ؛ استيراد com.thc.domain.product ؛ استيراد java.sql.sqlexception ؛ استيراد java.util.list = New ProductDao () ؛ // استدعاء طبقة DAO للاستعلام عن قائمة المنتجات <TOMPORT> ALLPRODUCT = DAO.FindAllProduct () ؛ إرجاع الناتج الجليدي ؛ }}
استعلام بيانات من الخادم في طبقة DAO وإعطاء طبقة الخدمة
package com.thc.dao ؛ استيراد com.thc.domain.product ؛ استيراد com.thc.Utils.jdbcutils ؛ استيراد org.apache.commons.dbutils.queryrunner ؛ استيراد org.apache.commons.dbutils.handlers.beanlisthandler ؛ استيراد java.sql.sql.sqlespection ؛ java.util.List;//====================================== The dao layer is specifically responsible for database operations public class ProductDao { //============= Query all product information public List<Product> findAllProduct() throws SQLException { //Use dbuTils لإنشاء QueryRunner Core Object QueryRunner QR = new QueryRunner (jdbcutils.getDataSource ()) ؛ // اكتب عبارة SQL للاستعلام عن جميع المنتجات SQL = "SELECT * FROM PRODUCT" ؛ // قم بتحويل المنتج إلى المنتج إلى مجموعة قائمة ، والعامة إلى قائمة المنتجات <TORTOM> المنتجات = QR.QUERY (SQL ، New Beanlisthandler <> (Product.class)) ؛ إرجاع المنتجات ؛ }}بعد حصول طبقة DAO على البيانات ، تقوم بتمريرها إلى طبقة الخدمة. ثم تقوم طبقة الخدمة بتمريرها إلى خدمة طبقة الويب. بعد حصول servlet على البيانات ، يتم حفظه في مجموعة القائمة ، ثم يحول مجموعة القائمة إلى نوع بيانات JSON ويكتبها إلى المتصفح. الكود التالي في الصفحة الأمامية هو تحليل بيانات JSON التي تم إرجاعها بواسطة Servlet
$ .post (url ، function (data) {// تحليل جميع البيانات المرسلة من خادم // ====================================================== ============================================================= =========================================================== ============================================================= =========================================================== ============================================================= =========================================================== ============================================================= وأضف إلى الجدول ، إضافة بيانات إلى الجدول $ ("#علامة التبويب"). إلحاق (protd) ؛من خلال أداة Grabber Package التي توفرها Google Chrome ، يمكنك رؤية بيانات استجابة Servlet
انسخ جميع بيانات الاستجابة ، وهي البيانات التالية. صفيف له كائن المنتج المتداخل.
الكائنات موجودة جميعها في شكل أزواج القيمة الرئيسية.
على سبيل المثال ، في البيانات الأولى ، يكون المفتاح هو العد والقيمة 100. المفتاح هو معرف ، القيمة 1 ، المفتاح هو الاسم ، القيمة هي التلفزيون ، السعر هو السعر ، القيمة هي 2000
[{"count": 100 ، "id": 1 ، "name": "TV" ، "Price": 2000} ، {"count": 200 ، "id": 2 ، {"count": 50 ، "id": 4 ، "name": "projector" ، "price": 2000} ، {"count": 1000 ، "id": 5 ، "name": "hp computer" ، {"count": 60 ، "id": 7 ، "name": "machine seuging" ، "price": 2000} ، {"count": 100 ، "id: 8 ،" name ":" xiaomi box "، {"count": 200 ، "id": 10 ، "name": "Water Purifier" ، "Price": 2000} ، {"count": 500 ، "id: 11 ، {"count": 200 ، "id": 13 ، "name": "Electric Pressure Cooker" ، "Price": 498} ، {"count": "300 ،" id ": 14 ،" name ":" rice cooker "، {"count": 200 ، "id": 16 ، "name": "Soy Milk Maker" ، "Price": 199} ، {"count": "300 ،" id ": 17 ،" name ": {"count": 250 ، "id": 19 ، "name": "Razor" ، "Price": 98} ، {"count": 1000 ، "id: 20 ، {"count": 1500 ، "id": 22 ، "name": "Libai" ، "Price": 9.9}]بدون ترقيم الصفحات ، يكون تأثير العرض كما يلي:
يتم عرض جميع البيانات في الصفحة. إذا كان هناك الكثير من البيانات ، على سبيل المثال ، البحث عن كلمة رئيسية على Baidu ، فقد يكون هناك عشرات الآلاف أو مئات الملايين منها. يستغرق الأمر وقتًا طويلاً للحصول على العديد من النتائج من قاعدة البيانات وإعطاء المتصفح كثيرًا. تجربة المستخدم سيئة للغاية ، لذا فإن تقنية الترحيل مطلوبة. يستخدم الترحيل البدني.
الاستعلام فقط عن المعلومات المطلوبة للصفحة الحالية من قاعدة البيانات في وقت واحد.
الخطوة 3: تمرير العدد الحالي للصفحات وعدد الصفحات المعروضة على الخادم
تحتاج صفحة HTML إلى زيادة العدد الحالي للصفحات وعدد الصفحات المعروضة لكل صفحة ، وتمريرها إلى الخادم
قم بتغيير الرمز كما هو موضح في الشكل التالي:
في طبقة Servlet ، يجب استلام المعلمات ويتم الاستعلام عن البيانات المقابلة للصفحة الحالية من طبقة الخدمة. الرمز كما يلي:
يمتد منتج الفئة العامة httpservlet {محمية void dopost (طلب httpservletrequest ، استجابة httpservletresponse) servletexception ، ioException {// التعامل مع request.setcharacterencoding ("utf-8") ؛ استجابة. // الصفحة الحالية int pageno = integer.parseint (request.getParameter ("pageno")) ؛ // عدد الإدخالات المعروضة لكل صفحة int pagesize = integer.parseint (request.getParameter ("pagesize")) ؛ // لأنه يعرض جميع معلومات المنتج ، لا توجد معلمة لتلقي // تحتاج طبقة الخدمة إلى استدعاء الطريقة للعثور على جميع البيانات ، والحصول على النتيجة ، والاستجابة لخدمة العميل Productservice = New Productervice () ؛ جرب {// وفقًا لعدد الصفحات المعروضة وكل صفحة ، احصل على بيانات من قائمة طبقة الخدمة <com.thc.domain.product> product = service.findproduct (Pageno ، pagesize) ؛ String jsonstring = jsonobject.tojsonstring (المنتج) ؛ // اكتب مرة أخرى إلى استجابة المتصفح. } catch (sqlexception e) {E.PrintStackTrace () ؛ }} doget void doget (httpservletrequest request ، httpservletresponse) يلقي servletexception ، ioException {dopost (request ، response) ؛ }}طريقة جديدة لإيجاد بيانات الصفحة الحالية المضافة في طبقة الخدمة
القائمة العامة <TORTORT> FindProduct (int pageno ، int pagesize) يلقي sqlexception {productdao dao = new ProductDao () ؛ قائمة <Product> Product = dao.findproduct (Pageno ، pagesize) ؛ إرجاع المنتج ؛ }الطريقة الجديدة لإيجاد الصفحة الحالية من قاعدة البيانات المضافة في طبقة DAO
القائمة العامة <TORTORT> FindProduct (int pageno ، int pagesize) يلقي sqlexception {QueryRunner qr = new QueryRunner (jdbcutils.getDataSource ()) ؛ String SQL = "SELECT * من حد المنتج؟ ،؟" ؛ // الحد من المعلمة الأولى: ابدأ من حيث في قاعدة البيانات ، يبدأ الفهرس من 0 // المعلمة الثانية: كم عدد الشيكات في كل مرة // قاعدة المعلمة الأولى هي: طرح العدد الحالي للصفحات على واحد ، اضرب بعدد الاستعلامات لكل قائمة page <droduct> productlist = qr.query (sql ، new BeanlisThandler <> pagesize) ؛ Return Productlist ؛ }يعرض جانب المتصفح كما هو موضح في الشكل أدناه: سيتم عرض معلومات المنتج فقط مع Pagesize (القيمة الحالية 6) في وقت واحد.
ومع ذلك ، لا يمكن تشغيل الصفحات ديناميكيًا بالنقر فوق الزر الصفحة.
ثم نحتاج إلى التفكير في كيفية عرض الصفحة شريط الترحيل وكيف ينبغي تغليف البيانات؟
نحن نعلم أن عدد الصفحات المعروضة في شريط ترحيل الصفحة يتم تغييرها ديناميكيًا . يجب تقريب العدد الإجمالي للصفحات = إجمالي عدد البيانات/البيانات المعروضة في كل صفحة للأعلى. بمعنى آخر ، بالإضافة إلى البيانات <torder> ، تحتاج صفحتنا أيضًا إلى إجمالي عدد البيانات ، وإجمالي عدد الصفحات ، والصفحة الحالية ، وعدد العروض لكل صفحة. بالإضافة إلى ذلك ، يتغير Pageno على الصفحة الحالية أيضًا بشكل ديناميكي. كم عدد الصفحات التي يتم النقر عليها على الصفحة؟ Pageno هو عدد Pageno. لذلك ، نحتاج إلى إنشاء Javabean (pagebean.java) لتغليف هذه البيانات ، ثم تحويلها إلى بيانات JSON وإرسالها إلى العميل لعرضها.
الخطوة 4: تغليف البيانات ذات الصلة للصفحة في جافابان
قم بإنشاء فصل يسمى PageBean في حزمة المجال ، مع الخصائص التالية:
Private int Pageno ؛ // رقم الصفحة الحالي pagesize pagesize ؛ // عدد المعروض في كل صفحة من private int totalCount ؛ // كم عدد بيانات معلومات المنتج الموجودة في إجمالي Private int totalpage ؛ // كم عدد صفحات البيانات الموجودة في القائمة الخاصة <trom
مرر العدد الحالي للصفحات (Pageno) في طبقة الخدمة وعدد الصفحات المعروضة في كل صفحة (Pagesize) وإرجاع صفحة صفحة إلى طبقة الويب.
الكود النهائي لطبقة الويب كما يلي
يمتد منتج الفئة العامة httpservlet {محمية void dopost (طلب httpservletrequest ، استجابة httpservletresponse) servletexception ، ioException {// التعامل مع request.setcharacterencoding ("utf-8") ؛ استجابة. // الصفحة الحالية int pageno = integer.parseint (request.getParameter ("pageno")) ؛ // عدد الإدخالات المعروضة لكل صفحة int pagesize = integer.parseint (request.getParameter ("pagesize")) ؛ // لأنه يعرض جميع معلومات المنتج ، لا توجد معلمة لتلقي // تحتاج طبقة الخدمة إلى استدعاء الطريقة للعثور على جميع البيانات ، والحصول على النتيجة ، والاستجابة لخدمة العميل Productservice = New Productervice () ؛ حاول { /* استدعاء طريقة طبقة العمل للحصول على جميع المنتجات <com.thc.domain.product> allprouct = service.findallprouct () ؛ قم بتحويل البيانات التي تم الحصول عليها إلى سلسلة بيانات نوع JSON jsonstring = jsonobject.tojsonstring (allprouct) ؛*// // جلب البيانات من طبقة الخدمة استنادًا إلى الصفحة الحالية والرقم المعروض في كل صفحة//قائمة <com.thc.domain.product> product = service.findProduct (pageno ، pages) ؛ . // ============================================================== ================================================================ ================================================================ ================================================================ jsonstring = jsonobject.tojsonstring (pageBean) ؛ . } catch (sqlexception e) {E.PrintStackTrace () ؛ }} doget void doget (httpservletrequest request ، httpservletresponse) يلقي servletexception ، ioException {dopost (request ، response) ؛ }}في الخدمة ، تحتاج إلى الحصول على جميع معلومات PageBean ، ومعروفة Pageno و Pagesize. تحتاج إلى الحصول على بيانات معلومات المنتج وجمع القائمة من طبقة DAO ، وتحتاج أيضًا إلى الحصول على إجمالي بيانات معلومات المنتج. كم عدد الصفحات التي يمكن تقسيمها على إجمالي البيانات بواسطة البيانات المعروضة في كل صفحة وتدويرها لأعلى.
الكود النهائي لطبقة الخدمة كما يلي:
Public Class ProductService {// في طبقة الخدمة ، احصل على بيانات من طبقة DAO وإرجاع البيانات إلى طبقة الويب // ======================================== قائمة عامة <trodallprouct () يلقي sqlexpective {productdao = // استدعاء طبقة DAO للاستعلام عن قائمة المنتجات <TOMPORT> ALLPRODUCT = DAO.FindAllProduct () ؛ إرجاع الناتج الجليدي ؛ } // ====================================== يتعلق ProductDao () ؛ قائمة <Product> Product = dao.findproduct (Pageno ، pagesize) ؛ إرجاع المنتج ؛ } // =============================================================================== ^ ProductDao () ؛ قائمة <Product> Product = dao.findproduct (Pageno ، pagesize) ؛ int totalCount = dao.findtoTalCount () ؛ PageBean Pb = new PageBean () ؛ // تغليف البيانات pb.settotalcount (TotalCount) ؛ PB.SetPageno (Pageno) ؛ pb.setpagesize (pagesize) ؛ PB.SetProducts (المنتج) ؛ // من الأعلى وحساب إجمالي عدد الصفحات. لا تنسَ أن تتضاعف بمقدار 1.0 ، وإلا فإن صفحة واحدة من البيانات ستكون مفقودة int totalpage = (int) math.ceil (TotalCount*1.0/pagesize) ؛ PB.SetTotalPage (TotalPage) ؛ // أعط البيانات إلى servlet Return PB ؛ }}في طبقة DAO ، تتم إضافة طريقة جديدة للاستعلام عن العدد الإجمالي لمعلومات قاعدة البيانات.
الرمز النهائي لطبقة DAO كما يلي
. new QueryRunner (jdbcutils.getDataSource ()) ؛ // اكتب عبارات SQL للاستعلام عن جميع المنتجات SQL = "SELECT * FROM PRODUCT" ؛ // قم بتحويل المنتج إلى مجموعة القائمة ، والعامة للمنتج هي قائمة المنتجات <product> products = qr.query (SQL ، New Beanlisthandler <> (Product.class)) ؛ إرجاع المنتجات ؛ } // ================================================== LIST PROMPLED <TONDPRODUCT (int pageno ، int pageSize) rems sqlexception {queryrunner qr = new QueryRunner ( String SQL = "SELECT * من حد المنتج؟ ،؟" ؛ // الحد من المعلمة الأولى: من أين تبدأ في قاعدة البيانات ، يبدأ الفهرس من 0 // المعلمة الثانية: كم في كل مرة تقوم فيها بالتحقق // قاعدة المعلمة الأولى هي: طرح العدد الحالي للصفحات على واحد ، اضرب بعدد الاستعلامات لكل قائمة صفحة <TORPORT> قائمة المنتج = qr.query (sql ، beanlisthler <> pagesize) ؛ Return Productlist ؛ } // =============== كم عدد البيانات الموجودة في الاستعلام؟ =============================== Public inttotalcount () يلقي sqlexception {QueryRunner qr = new QueryRunner (jdbcutils.getDatasource ()) ؛ String SQL = "SELECT COUNT (*) من المنتج" ؛ countl long = (long) qr.query (SQL ، new ScalarHandler ()) ؛ إرجاع countl.intvalue () ؛ }}الخطوة 5: معالجة الصفحة الأمامية
تحت علامة الجدول ، أضف سطرًا لتوفير مكون الترحيل. قم بالتعليق على رمز LI لأنه يحتاج إلى عرض ديناميكي.
أعلن أن متغيرات المعلمة ستستلم أولاً
var url = "/ajax_product/product" ؛ var pageno = 1 ؛ // يتم تعيين الصفحة الحالية على 1VAR Pagesize = 6 ؛ // في كل صفحة تعرض 6 معلومات عن المنتج var totalpage ؛
بعد كتابة طلب النشر لـ AJAX ، تختبر الحزمة التقاط ما إذا كان المتصفح يتلقى البيانات.
$ .post (url ، // عنوان البيانات المنقولة إلى الخادم {"pageno": pageno ، "pagesize": pagesize} ، // العدد الحالي للصفحات وعدد القطع المعروضة لكل وظيفة (بيانات) {})حصلت على البيانات التالية بعد التقاط الحزمة
{"Pageno": 1 ، "pagesize": 6 ، "المنتجات": [{"count": 100 ، "id": 1 ، "name": "TV" ، "Price": 2000} ، {"count": 200 ، المكيف "،" السعر ": 3000} ، {" العد ": 50 ،" معرف ": 4 ،" الاسم ":" Projector "،" Price ": 2000} ، {" count ": 1000 ،" id ": 5 ، "TotalCount": 22 ، "TotalPage": 3}وهذا يعني أن جانب الخادم يمكنه الاستجابة للمتصفح بشكل طبيعي. ثم اكتب الكود الأمامي
عرض البيانات في الجدول
أولاً ، قم بتحليل البيانات التي تم الحصول عليها من قبل الواجهة الخلفية ، ثم تزامنها في رمز JS ، واحصل على مجموعة من البيانات لجميع كائنات المنتج من خلال pagebean.products ، ثم تكرارها من خلال هذه الصفيف ، وقم بتوصيل قيمة سمة المنتج إلى الجدول.
الرمز كما يلي
$ .post (url ، // عنوان البيانات المنقولة إلى الخادم {"pageno": pageno ، "pagesize": pagesize} ، Pageno = pagebean.pageno ؛ ===================================================================================== ===================================================================================== ===================================================================================== ===================================================================================== لـ (var i = 0 ؛ i <products.length ؛ i ++) {// transfer data var protd = $ ("<tr> <td>"+products [i] .id+"</td> <td> </r> ") ؛ // أضف إلى الجدول ، أضف بيانات إلى الجدول $ ("#علامة التبويب "). إلحاق (protd) ؛}} ،" json ")بعد كتابة هذا الرمز ، يمكن تشغيل الخادم لاختبار ما إذا كان يمكن الحصول على البيانات في الجدول. يتم عرض البيانات بنجاح بعد الاختبار.
عرض بيانات شريط الصفحة
عرض أولاً بيانات الصفحة السابقة والصفحة التالية
. الصفحة </a> </li>) ؛ // إضافة $ (". pager"). إلحاق (preli) ؛ // إظهار الصفحة التالية var nextli = $ ('<li> <a href = "#" الصفحة </a> </li> ') ؛ // إضافة $ (". pager"). إلحاق (nextli) ؛نتائج الاختبار كما يلي:
عرض بيانات رقم الصفحة:
. الصفحة </a> </li>) ؛ // إضافة $ (". pager"). إلحاق (preli) ؛ // السفر عبر رقم الصفحة (var i = 1 ؛ i <= totalPage ؛ i ++) {// إنشاء علامة li var li = $ (' nofollow "rel =" nofollow external "rel =" nofollow ">+i+'</a> </li>') ؛ // أضف إلى UL من خلال محدد الفئة $ (". pager"). إلحاق (li) ؛} // إظهار الصفحة التالية var nextli = $ ('<li> <a href = "#" rel = "external nofloys" rel = "external nofollow" external noflollow "external noflollow" relollow rel = "خارجي nofollow"> الصفحة التالية </a> </li> ') ؛ // إضافة $ (". pager"). إلحاق (nextli) ؛يظهر التأثير في الشكل أدناه:
تم تسليط الضوء على الصفحة الحالية
نظرًا لأن فئة Pager لا تدعم تسليط الضوء في Bootstrap ، يتم استبدال فئة الترقيم بالترقيم.
يتمثل منطق التمييز في تحديد ما إذا كانت الصفحة الحالية (Pageno) عند العبور.
أضف السمة النشطة للفئة إلى علامة LI
// نقل رقم الصفحة لـ (var i = 1 ؛ i <= totalPage ؛ i ++) {var li ؛ if (i === pageno) {// ================= الصفحة الحالية ، قم بتمييز li = $ ('<li> <a href = "#" rel = "external nofollow" rel = "nofollow" > '+i+' </a> </li> ') ؛ // أضف إلى UL من خلال محدد الفئة $ (". ترقيم"). إلحاق (li) ؛ } آخر {// ============= الصفحة الحالية ، لا يبرز li = $ ('<li> <a href = "#" rel = "nofollow external" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> // أضف إلى UL من خلال محدد الفئة $ (". ترقيم"). إلحاق (li) ؛ }}التأثير على النحو التالي
أضف انقر فوق أحداث إلى رقم الصفحة وتبديل البيانات.
لا يوجد حاجة لحدث النقر على الصفحة الحالية
أضف حدث onclick إلى علامة A في عدد الصفحات ، وربط وظيفة Skippage (). العملية في وظيفة Skippage () هي في الواقع تشغيل إرسال طلب النشر Ajax إلى الخادم عندما نحصل على بيانات الصفحة الأولى. لذلك ، انسخ رمز $ (function () {}) في وظيفة skippage () ، ثم اتصل بوظيفة skippage () عند تحميل الصفحة. تمرير 1 يعني أنه يتم تحميل بيانات الصفحة 1 بشكل افتراضي. في هذا الوقت ، سيتم تنفيذ $ (function () {}) مرة واحدة فقط. Skippage () يصبح وظيفة متكررة وتدعو نفسها. ومع ذلك ، فإن حدث نقرة واحدة لن يستدعي سوى طريقة Skippage مرة واحدة ، والتي تختلف عن العودية في Java.
بعد تنفيذ هذا الرمز ، انقر على رموز مختلفة وابحث عن أن محتوى الجدول وشريط الصفحة سيتم فرضه بشكل مستمر.
كما هو مبين في الشكل أدناه:
امسح البيانات في كل مرة يتم فيها تحميل البيانات. امسح شريط الصفحة
بعد إضافة الرمز لمسح شريط الصفحة ، وجدت أن شريط الصفحة لم يتم تثبيته ، لكن الجدول لا يزال مُحوراً.
مسح النموذج
$("#tab").empty(); بعد تنفيذ الرمز الواضح للجدول ، وجدت الظاهرة التالية:
اختفى السطر الأول من الجدول ، لذلك تحتاج إلى استخدام محدد لاستبعاد السطر الأول.
$ ("#tab tr: not (: first)") يعني
أولاً حدد الجدول وفقًا لمحدد المعرف
ثم ، من المحدد الهرمي ، حدد صف TR
المحدد الأساسي أولاً متداخل في المحدد الأساسي لا ، مما يعني أنه ليس السطر الأول
المعنى العام هو أنه إذا لم يكن الجدول هو الصف الأول ، فسيتم استدعاء الطريقة الفارغة () لحذف جميع العقد الفرعية في مجموعة العناصر المطابقة.
بعد الاختبار ، يمكن حذف السطر الأول من البيانات
حدد ما إذا كانت متوفرة في الصفحة السابقة ، ووظيفة أرقام الصفحات التبديل
إذا كانت الصفحة الحالية هي الصفحة الأولى ، فإن وظيفة الصفحة السابقة غير متوفرة.
إذا لم تكن الصفحة الحالية هي الصفحة الأولى ، فأضف حدث انقر فوق ، قم بالتبديل إلى الصفحة السابقة ، وقم بتقليل رقم الصفحة بمقدار واحد.
// إظهار الصفحة السابقة وحدد ما إذا كان Var Preli متاحًا ؛ إذا كانت (pageno === 1) {// إذا كانت الصفحة الحالية هي الصفحة الأولى ، فإن وظيفة الصفحة السابقة غير متوفرة preli = $ ('<li> <a href = "javaScript: void (0)" rel = "external nofollow" relOll "relollow rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofololl" rel = "خارجي nofloll rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofololl" rel = "خارجي nofloll rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "extrial nofollow" rel = "external nofollow"> الصفحة السابقة </a> </li> ') ؛ href = "javaScript: void (0)" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = OnClick = "Skippage ('+(pageno-1)+')"> الصفحة السابقة </a> </li> ') ؛} // استخدم محدد الفئة ، إضافة $ (". تراجع"). إلحاق (preli) ؛حدد ما إذا كانت متوفرة في الصفحة التالية ، ووظيفة أرقام الصفحات التبديل
إذا كانت الصفحة الحالية هي الصفحة الأخيرة ، فلن تتوفر وظيفة الصفحة السابقة.
إذا لم تكن الصفحة الحالية هي الصفحة الأخيرة ، فأضف حدث انقر فوق ، قم بالتبديل إلى الصفحة التالية ، وأضف رقم صفحة.
// إظهار الصفحة التالية وحدد ما إذا كان Var Nextli متاحًا ؛ if (pageno === TotalPage) {// إذا كانت الصفحة الحالية هي الصفحة الأخيرة ، فإن وظيفة الصفحة السابقة غير متوفرة. nextli = $ ('<li> <a href = "javaScript: void (0)" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofloy rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofololl" rel = "خارجي nofloll rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "nofollow خارجي" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofololl" rel = "خارجي nofloll rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external no >Next page</a></li>');}else { //If the current page is not the last page, add a click event, switch to the previous page, and reduce the page number by one. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo+1)+')">Next page</a></li>');}// Through the class selector, add $(".pagination").append(nextLi);至此,前端页面的代码全部完成,功能全部实现
前端页面的全部代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品展示列表</title> <!--引入bootstrap相关文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> var url ="/ajax_product/product"; var pageNo=1;//当前页面设置为1 var pageSize=5;//每页显示6条商品信息var totalPage;//一共有多少页数据var products;//商品的数据信息//页面加载时,向服务器发送请求,接收全部的商品数据$(function () { skipPage(1); }); function skipPage(page) { //===========分页时的post请求=================================== pageNo=page; //=====向服务器发送post请求$.post( url,//给服务器传送数据的地址{"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数function (data) { //解析服务器端传过来的全部pagebean数据,格式为json类型var pagebean = eval(data); //同步数据pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //显示表格中的数据=============================================== //$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //遍历每一行的数据var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中$("#tab").append(protd); } //显示分页条的数据======================================================== //清空分页条$(".pagination").empty(); //先不考虑功能,先能显示出来//显示上一页,判断是否可用var preLi; if(pageNo===1){ //如果当前页是第一页,上一页功能就不可用. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a> </li>'); }else{ //如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')">上一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(preLi); //遍历显示页码for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //=========是当前页,就高亮显示li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>'); //通过类选择器,添加到ul中$(".pagination").append(li); }else{ //========不是当前页,不高亮显示.添加点击事件,参数传递为当前页码li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>'); //通过类选择器,添加到ul中$(".pagination").append(li); } } //显示下一页,判断是否可用var nextLi; if(pageNo===totalPage){ //如果当前页是最后一页,上一页功能就不可用. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a> </li>'); }else { //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')">下一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(nextLi); },"json") }</script><body><h3 align="center">促销商品展示</h3><div> <!--商品的表格占一行--> <div> <div> <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化table-bordered表示给表格加边框--> <table id="tab"> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </table> </div> </div> <div> <div > <nav> <ul> <!--此处代码由js动态生成--> </ul> </nav> </div> </div></div></body></html>لخص
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.