أولاً ، دعنا نقدم paginator بسيط وأنيق: bootstrap-paginator. يمكنك الرجوع إلى: bootstrap paginator. شرح مفصل لاستخدام المكون الإضافي للترحيل. يستخدم هذا المقال للتعلم.
لقطة شاشة التأثير:
عنوان التنزيل الرسمي Github: https://github.com/lyonlai/bootstrap-paginator
دعنا نقدم عملية تنفيذ عرض JSP Paging Display استنادًا إلى أداة الترحيل هذه بالتفصيل (ملاحظة: بالمقارنة مع صفحة الويب الأصلية ، قمت بإخفاء الكثير من المحتوى غير الضروري ، وهذا المثال يركز فقط على تنفيذ عرض الترحيل)
1. لماذا تحتاج إلى عرض الترحيل؟
يشرح ذلك منشور المدونة هذا جيدًا: مبادئ تكنولوجيا الترحيل وأهمية وطرق الترحيل (I)
2. جزء صفحة JSP ، هنا الاتصال مباشرة بقاعدة بيانات SQLServer2005 مع JDBC في صفحة JSP للاستعلام عن بيانات (في التنفيذ الفعلي ، لا ينصح بتغليف منطق العمل المعقد في صفحة JSP ، يجب أن تكون صفحة JSP مسؤولة فقط عن العرض ؛ الاستجابة للاتصالات التجارية ، وينبغي أن تكون النتيجة إعادة التوجيه إلى الأمام)
الرمز كما يلي:
<٪@ page import = "paginationexample.*" ٪> <٪@ page isport = "java.util.*" ٪> <٪@ page import = "java.sql.*" ٪> <٪@ page language = "java pagesize int static int static = 20 ؛ // قم بتعيين عدد السجلات المعروضة لكل صفحة (حاليًا 20 سجلًا معروضًا لكل صفحة) ٪> <٪ request.setcharacterencoding ("UTF-8") ؛ // قم بتعيين المحتوى المقدم من العميل إلى Servlet باسم UTF-8 ترميز الاستجابة. setcharacterencoding ("UTF-8") ؛ // قم بتعيين المحتوى المرسلة إلى servlet إلى العميل باسم UTF-8 الترميز reposion.setContentType ("Text/HTML ؛ Charset = UTF-8") ؛ . // تلقي عدد الصفحات التي سيتم عرضها بواسطة العميل int pageno = 1 ؛ // عدد الصفحات المراد عرضها int totalpages = 1 ؛ // إجمالي عدد الصفحات // تحقق وتعيين pageno if (pagenosttr! = null &&! pagenosttr.equals ("")) {try {pageno = integer.parseint (pagenostr) ؛ إذا كان (Pageno <1) {// إذا كان Pageno أقل من 1 ، فسيتم عرض الصفحة الأولى بشكل افتراضي Pageno = 1 ؛ }} catch (numberFormatexception e) {// عندما يكون Pageno الذي تم الحصول عليه (العدد الحالي للصفحات) غير قانوني ، يتم عرض الصفحة الأولى بشكل افتراضي Pageno = 1 ؛ }} آخر {// الحالات الأخرى التي لم يتم فيها استرداد pageno بشكل افتراضي pageno = 1 ؛ } /* ========================================================== ========================================================== *//*احصل على إجمالي عدد الصفحات في قاعدة البيانات بعد ترسيخ السجلات بالرقم المحدد (Pagesize)*/ Connection TotalConn = null ؛ بيان totalStmt = null ؛ resultset totalRs = null ؛ حاول {totalConn = dbutil.getConnection () ؛ // إنشاء سلسلة SQL SQLGETTOTALPAGES = "حدد العد (*) من alldata" ؛ // احصل على إجمالي عدد السجلات totalStmt = TotalConn.Createstatement () ؛ TotalRs = TotalStmt.executequery (sqlgetTotalPages) ؛ totalrs.next () ؛ int countresult = totalRs.GetInt (1) ؛ // احصل على إجمالي عدد الصفحات الإجمالية = Countresult ٪ pagesize == 0؟ Countresult / Pagesize: (int) (Countresult / Pagesize) + 1 ؛ } catch (sqlexception e) {system.out.println ("حدث خطأ في استعلام التاريخ ، لم تكتمل العملية!") ؛ E.PrintStackTrace () ؛ } أخيرًا {dbutil.close (totalRs) ؛ dbutil.close (TotalStmt) ؛ dbutil.close (TotalConn) ؛ } /* إذا كان عدد الصفحات أكبر من إجمالي عدد الصفحات ، فسيتم عرض الصفحة الأخيرة بشكل افتراضي* / if (pageno> totalpages) {pageno = totalpages ؛ } /* احصل على سجلات المراقبة التي سيتم عرضها في الصفحة الحالية في قاعدة البيانات ، واستخدم قائمة لتخزين السجلات* / LIST <RONDACT> سجلات = ArrayList New ArrayList <Record> () ؛ اتصال conn = null ؛ ReparedStatement PSTMT = NULL ؛ resultset rs = null ؛ int startIndex = (pageno - 1) * pagesize + 1 ؛ int endindex = pageno * pagesize ؛ حاول {conn = dbutil.getConnection () ؛ String SQL = "SELECT * FROM (SELECT ROW_NUMBER () Over (order by data_taizhan_num ، data_date asc) كـ" num "، * from alldata) على أنها درجة حرارة حيث num بين" + startIndex + "و" + endIndex ؛ PSTMT = conn.preparestatement (SQL) ؛ rs = pstmt.executequery () ؛ بينما (rs.next ()) {// قم بإخراج بيانات كل سجل وتغليفه في سجل كائن السجل r = new record () ؛ R.Settaizhan_num (Rs.GetString (2)) ؛ R.SetDate (Rs.GetTimestamp (3)) ؛ R.Settem (Rs.GetString (4)) ؛ R.Sethum (Rs.GetString (5)) ؛ R.SetPA (RS.GetString (6)) ؛ R.SetRain (RS.GetString (7)) ؛ r.setwin_dir (Rs.GetString (8)) ؛ R.Setwin_Sp (Rs.GetString (9)) ؛ records.add (r) ؛ // ضع كائن السجل المغلف في حاوية القائمة}} catch (sqlexception e) {system.out.println ("خطأ الاستعلام ، العملية غير مكتملة!") ؛ E.PrintStackTrace () ؛ } أخيرًا {dbutil.close (rs) ؛ dbutil.close (pstmt) ؛ dbutil.close (conn) ؛ } system.out.println (totalpages) ؛ System.out.println(pageNo);/* ==================================================================================================*/ ٪> <! doctype html public "-// w3c // dtd html 4.01 Transitional // en" "http://www.w3 charset = utf-8 "> <meta http-equiv =" x-ua confervated "content =" ie = edge "> <٪-قم بتشغيل أحدث وضع عرض في ie-٪> <meta name =" viewport "content =" width = width = device-width ، scale scale = 1 "> rel = "stylesheet" href = "css/bootstrap.css"> <link rel = "stylesheet" href = "css/recordsearchresult.css"> <script type = "text/javaScript" src = "js/jquery-1.12.min.js" </script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap-paginator.min.js"> </script> </title>-سجل البحث-</head> <body> <viv> records.size () == 0) {out.println ("<tr> <td> <h4> <strong> لا توجد سجلات تلبي المتطلبات ، لماذا لا تحاول تغيير معايير البحث ~ </strong> </h4> </td> </td>") ؛ } else {٪> <tr> <td> <h4> <strong> محطة المراقبة </strong> </h4> </td> <٪ record r = records.get (0) ؛ if (r.getTem ()! = null) {out.println ("<td> <h4> <strong> درجة الحرارة (℃) </strong> </h4> </td>") ؛ } if (r.gethum ()! = null) {out.println ("<td> <h4> <strong> الرطوبة (٪) </strong> </h4> </td>") ؛ } if (r.getpa ()! = null) {out.println ("<td> <h4> <strong> الضغط (HPA) </strong> </h4> </td>") ؛ } if (r.getRain ()! = null) {out.println ("<td> <h4> <strong> هطول الأمطار (مم) </strong> </h4> </td>") ؛ } if (r.getwin_dir ()! = null) {out.println ("<td> <h4> <strong> اتجاه الرياح (°) </strong> </h4> </td>") ؛ } if (r.getwin_sp ()! = null) {out.println ("<td> <h4> <strong> سرعة الرياح (m/s) </strong> </h4> </td>") ؛ } ٪> <td> <h4> <strong> وقت المراقبة </strong> </h4> </td> </tr> <٪} ٪> <٪ if (السجلات! = null && recounts.size ()! = 0) {for (record r: res) null) {out.println ("<td>" + r.gettem () + "</td>") ؛ } if (r.gethum ()! = null) {out.println ("<td>" + r.gethum () + "</td>") ؛ } if (r.getpa ()! = null) {out.println ("<td>" + r.getpa () + "</td>") ؛ } if (r.getRain ()! = null) {out.println ("<td>" + r.getRain () + "</td>") ؛ } if (r.getwin_dir ()! = null) {out.println ("<td>" + r.getwin_dir () + "</td>") ؛ } if (r.getwin_sp ()! = null) {out.println ("<td>" + r.getwin_sp () + "</td>") ؛ } ٪> <td> <٪ = R.GetDate () ٪> </td> </tr> <٪} ٪> </table> <!-عرض تراجعات div-> <div align = "center"> <ul id = "paginator"> </ul> </uliv> </form> <٪} ٪> </viv> bootstrapmajorversion: 3 ، // bootstrap حجم الإصدار: 'normal' ، itemTexts: function (type ، page ، current) {switch (type) {case "first": return "home" ؛ الحالة "السابقة": العودة "<i class = 'fa fa-caret-left'> </i> الصفحة السابقة" ؛ الحالة "التالي": العودة "الصفحة التالية <i class = 'fa fa-caret-right'> </i>" ؛ الحالة "الأخيرة": إرجاع "الصفحة الأخيرة" ؛ حالة "صفحة": صفحة الإرجاع ؛ }} ، tooltiptitles: function (type ، page ، current) {switch (type) {case "first": return "homepage" ؛ الحالة "السابقة": إرجاع "الصفحة السابقة" ؛ حالة "التالي": إرجاع "الصفحة التالية" ؛ الحالة "الأخيرة": إرجاع "الصفحة الأخيرة" ؛ حالة "صفحة": إرجاع "موضوع" + صفحة + "صفحة" ؛ }} ، pageurl: function (type ، page ، current) {return "showInfosearchResult.jsp؟ pagenosttr ="+page ؛ // انتقل إلى الصفحة المحددة} ، رقم pagges: 6 ، // عدد الخيارات لعرض "أي صفحة" هي حاليًا: <٪ = pageno ٪> ، // pages totalpages total pages: <٪ = totalpages ٪> // total pages} $ ('#paginator'). bootstrappaginator (خيارات) ؛ </script> </body> </html>3. فيما يتعلق بالسجل و dbutil فئات المستخدمة في هذا المثال:
فئة السجلات هي فئة Java عادية تغلف البيانات ولا توفر سوى طرق الحصول على/تعيين. تتوافق خصائصه مع الحقول الواردة في جدول قاعدة البيانات واحدًا تلو الآخر. الرمز كما يلي:
حزمة PaginationExample ؛ استيراد java.sql.* ؛/*** تغليف معلومات بيانات الأرصاد الجوية* Author Zhong**/سجل الفئة العامة {private string taizhan_num ؛ // اسم المحطة السلسلة الخاصة // درجة حرارة السلسلة الخاصة. // الرطوبة السلسلة الخاصة ؛ // الضغط على المطر الخاص. // هطول الأمطار الخاص سلسلة win_dir ؛ // Wind Direction Private String Win_sp ؛ // Wind Speed Private Timestamp Date ؛ // تاريخ المراقبة (التنسيق الأصلي) /*** احصل على اسم المحطة التي ولدت سجل المراقبة ؛ * اسم محطة العودة*/ السلسلة العامة gettaizhan_num () {return taizhan_num ؛ } /*** اضبط اسم المحطة التي تنتج سجل المراقبة ؛ * param taizhan_num اسم المحطة المراد تعيينه*/ public void settaizhan_num (String taizhan_num) {this.taizhan_num = taizhan_num ؛ } /*** الحصول على درجة الحرارة ؛ * @قيمة درجة الحرارة*/ السلسلة العامة getTem () {return tem ؛ } /*** اضبط درجة الحرارة ؛ * param tem قيمة درجة الحرارة المراد تعيينها*/ public void settem (String tem) {this.tem = tem ؛ } /*** احصل على الرطوبة ؛ * return قيمة الرطوبة*/ السلسلة العامة gethum () {return hum ؛ } /*** تعيين الرطوبة ؛ * param hum hum ليتم تعيينه*/ public void sethum (string hum) {this.hum = hum ؛ } /*** احصل على الضغط ؛ * return value*/ public string getpa () {return pa ؛ } /*** ضبط الضغط ؛ * param pa ليتم تعيينه*/ public void setpa (string pa) {this.pa = pa ؛ } /*** احصل على هطول الأمطار ؛ * @RETURN RAIKALL VALUE */ Public String getRain () {return Rain ؛ } /*** تعيين هطول الأمطار ؛ * param Rain ليتم ضبط قيمة المطر */ public void setrain (سلسلة المطر) {this.rain = Rain ؛ } /*** احصل على اتجاه الرياح ؛ * return direction value */ public string getwin_dir () {return win_dir ؛ } /*** تعيين اتجاه الرياح ؛ * param win_dir ليتم تعيين قيمة اتجاه الرياح */ public void setwin_dir (String win_dir) {this.win_dir = win_dir ؛ } /*** الحصول على سرعة الرياح ؛ * @RETURN REED VALUE */ public string getwin_sp () {return win_sp ؛ } /*** اضبط اتجاه الرياح ؛ * param win_sp قيمة اتجاه الرياح ليتم تعيينها*/ public void setwin_sp (string win_sp) {this.win_sp = win_sp ؛ } /*** احصل على تاريخ المراقبة ؛ * return تاريخ المراقبة*/ public timestamp getDate () {return date ؛ } /*** اضبط تاريخ المراقبة ؛ * Param Date Date Date Value*/ public void setDate (تاريخ الطابع الزمني) {this.date = date ؛ }}لقطة شاشة لجدول Alldata المقابل:
فئة DBUTIL هي فئة أدوات قاعدة البيانات التي توفر اتصالات وبيانات متعلقة بقاعدة البيانات ، وما إلى ذلك مع الرمز التالي:
pagination example ؛ import java.sql. * ؛ import org.apache.tomcat.jdbc.pool.datasource ؛ import org.apache.tomcat.jdbc.pool.poolproperties ؛/** * dataBase class (باستخدام تجمع tomcat jdbc) * @athong zhong * ثابت {// تكوين تجمع Tomcat JDBC (تجمع الاتصال) poolproperties p = new poolproperties () ؛ p.seturl ("jdbc: sqlserver: // localhost: 1433 ؛ databasename = weather") ؛ // قم بتعيين URL P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver") ؛ // تحميل برنامج تشغيل قاعدة البيانات P.SetUserName ("SA") ؛ // اسم المستخدم للاتصال عن بُعد p.sPPassword ("2003niandiyichangxue") ؛ // password p.setJmxEnabled (true) ؛ p.settesthileIdle (false) ؛ P.SettestonBorrow (صواب) ؛ p.setValidationQuery ("SELECT 1") ؛ P.SettestOnreturn (false) ؛ P.SetValidationInterval (30000) ؛ P.SetTimeBetweenevictionRunsmillis (30000) ؛ P.SetMaxActive (100) ؛ p.setInitialSize (10) ؛ P.SetMaxWait (10000) ؛ P.SetRemovaBandonedTimeout (60) ؛ P.SetMineVictableDletimemillis (30000) ؛ P.SetMinidle (10) ؛ P.SetLogabandoned (صواب) ؛ P.SetRemovaBandoned (صواب) ؛ p.setjdbcinterceptors ("org.apache.tomcat.jdbc.pool.Interceptor.ConnectionState ؛"+ "org.apache.tomcat.jdbc.pool.Interceptor.StatementFinalizer") ؛ ds = new DataSource () ؛ ds.setPoolProperties (P) ؛ } private dbutil () {} /*** احصل على اتصال قاعدة بيانات (اتصال) ؛ * @RETURN Database Connection */ public static connection getConnection () {connection conn = null ؛ حاول {conn = ds.getConnection () ؛ } catch (sqlexception e) {E.PrintStackTrace () ؛ } return conn ؛ } /*** أغلق الاتصال الوارد ؛ * @param conn connection to extring */ public static void close (connection conn) {try {if (conn! = null) {conn.close () ؛ conn = null ؛ }} catch (sqlexception e) {E.PrintStackTrace () ؛ }} /*** أغلق البيان الوارد ؛ * param stmt بيان ليتم إغلاقه */ إغلاق الفراغ الثابت العام (بيان stmt) {try {if (stmt! = null) {stmt.close () ؛ STMT = فارغة ؛ }} catch (sqlexception e) {E.PrintStackTrace () ؛ }} /*** أغلق مجموعة النتائج الواردة ؛ * param rs resultse ليتم إغلاقه */ إغلاق الفراغ الثابت العام (resultset rs) {try {if (rs! = null) {rs.close () ؛ rs = فارغة ؛ }} catch (sqlexception e) {E.PrintStackTrace () ؛ }}}4. ملاحظة تكميلية:
①: عندما يقوم SQLServer بتنفيذ الترحيل ، من الضروري استخدام وظيفة ROW_Number () لإنشاء عمود يسجل رقم الصف بشكل منفصل ، وذلك لتسهيل الترحيل اللاحق لفاصل رقم الصف المقابل. مثال:
رأيت أنه كان هناك عمود أمامه رقم صف يسمى NUM مع اسم حقل رقم الصف ؛
(إذا كان معرف المفتاح الأساسي في الجدول هو رقم متزايد تلقائيًا ، فيمكنك أيضًا استخدام المعرف لاسترداد السجل في الأجزاء ، ولكن الفرضية هي أن المعرف يجب أن يتم زيادة مستمر وتلقائيًا)
لمزيد من المعلومات حول تنفيذ وظيفة الترحيل بواسطة ROW_NUMBER () ، يرجى الرجوع إلى: طريقة تنفيذ SQL Server لاستخدام ترحيل ROW_Number
②: ترقيم ترقيم MySQL أبسط بكثير ، ما عليك سوى استخدام الكلمة الرئيسية الحد. مثال:
حدد * من Table1 Order by ID ASC Limit 3 ، 2 يعني أنه بعد فرز البيانات في Table1 حسب قيمة المعرف (ترتيب ASC) ، بدءًا من الصف الثالث ، خذ صفينان من السجلات التالية (أي سجل الصف الرابع والخامس)
③: من أجل الاستخدام المحدد لـ Bootstrap-paginator ، يمكنك الرجوع إلى المستند الرسمي (الموجود في مجلد المستند بعد الضغط). الوثيقة الرسمية مكتوبة بشكل جيد للغاية وبسيطة وسهلة الفهم.
عند استخدام إصدار Bootstrap V3 ، يجب عليك استخدام العلامة <ul> لعرض bootstrap-paginator ، والإشارة إلى إصدار bootstrap المستخدم في عنصر التكوين (انظر طريقة كتابة صفحة مثال JSP).
(يمكن استخدام إصدار Bootstrap V2 مباشرة باستخدام علامة <viv> في مستند العينة)
④: الصيغ الشائعة الاستخدام للترقيم: لنفترض أن عدد الصفحات المراد عرض
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.