Pertama, mari kita perkenalkan paginator yang sederhana dan rapi: bootstrap-paginator. Anda dapat merujuk ke: Bootstrap Paginator. Penjelasan terperinci tentang penggunaan plugin paginator paginator. Artikel ini digunakan untuk belajar.
Efek tangkapan layar:
Alamat unduhan resmi Github: https://github.com/lyonlai/bootstrap-paginator
Mari kita perkenalkan proses implementasi tampilan paging JSP berdasarkan alat paging ini secara rinci (Catatan: Dibandingkan dengan halaman web asli, saya telah menyembunyikan banyak konten yang tidak perlu, dan contoh ini hanya berfokus pada implementasi tampilan paging)
1. Mengapa Anda perlu menampilkan paging?
Posting blog ini menjelaskannya secara menyeluruh: prinsip -prinsip teknologi paging dan signifikansi dan metode paging (i)
2. Bagian Halaman JSP , di sini langsung terhubung ke database SQLServer2005 dengan JDBC di halaman JSP untuk meminta data (dalam implementasi aktual, tidak disarankan untuk merangkum logika bisnis yang kompleks di halaman JSP, Hasil Hasil harus diselesaikan oleh Serve)
Kodenya adalah sebagai berikut:
<%@ page impor = "PaginationExample.*"%> <%@ page impor = "java.util.*"%> <%@ page impor = "java.sql.*"%> <%@ page language = "java" contentType = "Text/html; charset = utf-uTf-8" pageencoding = "UTF-8" UTF-8 "pageenCoding =" UTF-8 "UTF-8" Private static final int pageSize = 20; // Atur jumlah catatan yang ditampilkan per halaman (saat ini 20 catatan ditampilkan per halaman)%> <% request.setcharacterencoding ("UTF-8"); // Atur konten yang dikirimkan oleh klien ke servlet sebagai UTF-8 encoding response.setcharacterencoding ("UTF-8"); // Atur konten yang dikirim kembali ke servlet ke klien sebagai UTF-8 Encoding Response.setContentType ("Teks/html; charset = UTF-8"); // informasikan browser untuk menguraikan konten dalam format UTF-8 string pagenostr = request.getParameter ("pagenostr"); // Terima jumlah halaman yang akan ditampilkan oleh klien int pageno = 1; // Jumlah halaman yang akan ditampilkan int totalpages = 1; // Jumlah total halaman // periksa dan atur pageno if (pagenostr! = Null &&! Pagenostr.equals ("")) {coba {pageno = integer.parseint (pagenoStr); if (pageno <1) {// jika pageno kurang dari 1, halaman pertama ditampilkan dengan pageno default = 1; }} catch (NumberFormateException e) {// Ketika pageno diperoleh (jumlah halaman saat ini) adalah ilegal, halaman pertama ditampilkan secara default pageno = 1; }} else {// kasus lain di mana pageno belum diambil ditampilkan dengan pageno default = 1; } /* ================================================================ ================================================================ *//*Dapatkan jumlah total halaman dalam database setelah catatan di -pag dengan nomor yang ditentukan (halaman)*/ koneksi totalConn = null; Pernyataan TotalStMt = NULL; Hasil TotalRS = NULL; coba {totalConn = dbutil.getConnection (); // Hasilkan Pernyataan SQL String SQLGEtTOtaRpages = "Pilih Count (*) dari AllData"; // Dapatkan jumlah total catatan TotalStMT = TotalConn.CreateStAtement (); totalRs = TotalStMt.ExecuteQuery (SQLGettotalPages); totalrs.next (); int countresult = totalrs.getint (1); // Dapatkan jumlah total halaman TotalPages = Countresult % PageSize == 0? Countresult / PageSize: (int) (Countresult / PageSize) + 1; } catch (sqlexception e) {System.out.println ("Terjadi kesalahan dalam kueri riwayat, operasi tidak selesai!"); e.printstacktrace (); } akhirnya {dbutil.close (totalRs); Dbutil.close (totalstmt); Dbutil.close (totalConn); } /* Jika jumlah halaman lebih besar dari jumlah total halaman, halaman terakhir ditampilkan secara default* / if (pageno> totalpages) {pageno = totalPages; } /* Dapatkan catatan observasi yang akan ditampilkan di halaman saat ini di database, dan gunakan daftar untuk menyimpan catatan* / Daftar <Recking> Records = ArrayList baru <Recking> (); Koneksi conn = null; PSTMT Persiapan PSTMT = NULL; Hasil rs = null; int startIndex = (pageno - 1) * halaman + 1; int endIndex = pageno * halaman; coba {conn = dbutil.getConnection (); String sql = "SELECT * from (SELECT row_number () over (order by Data_taizhan_num, data_date ASC) sebagai 'num', * dari allData) sebagai suhu di mana num antara" + startIndex + "dan" + endIndex; PSTMT = Conn.PrepareStatement (SQL); RS = PSTMT.ExecuteQuery (); while (rs.next ()) {// ambil data dari setiap catatan dan merangkumnya ke dalam catatan catatan catatan 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); // Masukkan objek rekaman yang dienkapsulasi ke dalam daftar wadah}} catch (sqlexception e) {System.out.println ("Kesalahan kueri, operasi tidak selesai!"); e.printstacktrace (); } akhirnya {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 transisi // en" "http://www.w3.org/tr/html4/loose.dtd"> <html lang =" zh-cn "> <head> <head>; charset = utf-8 "> <meta http-equiv =" x-ua-kompatibel "konten =" IE = edge "> <%-jalankan mode rendering terbaru di IE-%> <meta name =" viewport "content =" width = device-width, skala awal = 1 "> <%-inisialisasi browsing-browsing-well-name = qidth, aute" name = 1 "> <%-inisialisasi browsing-browsing <". rel = "stylesheet" href = "css/bootstrap.css"> <link rel = "stylesheet" href = "css/recordsearchresult.css"> <script type = "text/javascript" src = "js/jQuery-jQuery -.12.3.min.js"> </scrips = "JS/JQUERY-JQUERY-12.3. src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap-paginator.min.js"> </script> <title>-CATATAN PENCARIAN-</title> </head> <dift> <dif> <dv> <derv> <nuL-catatan | PERUBAHAN | PERUBAHAN IFFERID> </head> <body> <bod> <dv> <derv> <perayal> <perodion ifer | Records.Size () == 0) {out.println ("<tr> <td> <h4> <strong> tidak ada catatan yang memenuhi persyaratan, mengapa tidak mencoba mengubah kriteria pencarian ~ </strong> </h4> </td> </tr>"); } else { %> <tr> <td> <h4> <strong> stasiun pengamatan </strong> </h4> </td> < % Record r = records.get (0); if (r.gettem ()! = null) {out.println ("<td> <h4> <strong> suhu (℃) </strong> </h4> </td>"); } if (r.gethum ()! = null) {out.println ("<td> <h4> <strong> kelembaban (%) </strong> </h4> </td>"); } if (r.getPa ()! = null) {out.println ("<td> <h4> <strong> tekanan (hpa) </strong> </h4> </td>"); } if (r.getRain ()! = null) {out.println ("<td> <h4> <strong> curah hujan (mm) </strong> </h4> </td>"); } if (r.getwin_dir ()! = null) {out.println ("<td> <h4> <strong> arah angin (°) </strong> </h4> </td>"); } if (r.getwin_sp ()! = null) {out.println ("<td> <h4> <strong> kecepatan angin (m/s) </strong> </h4> </td>"); } %> <td> <h4> <strong> Waktu pengamatan </strong> </h4> </td> </tr> < %} %> < %if (catatan! = null && records.size ()! = 0) {untuk (catatan r: records) { %> <tr> <td> <td> < %= r.gettazhan (r.num (r.) <) <tr> <td> <td> < %= r.gettazhan (r.num (R.) (tD> <td> <td> < %= r.gettaizhan (R. r.num (R.) (td> <td> <td> < %= r.gettaizhan (R. r.num (R.) (tD> <td> <td> < %= r.gettaizhan (r.num (R.) (r. r.num (r. r.num (r. r.num (r..num (tD> <TD> <TD> < %= 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> < %} %> </boable> <!-pagination display div-> <div align = "center"> <ul id = "paginator"> </ul> </div> </form> < %} %> </div> </Div> </ul> </div> </form. bootstrapmajorversion: 3, // bootstrap ukuran versi: 'normal', itemtexts: function (type, page, current) {switch (type) {case "first": return "home"; case "prev": return "<i class = 'fa-caret-left'> </i> halaman sebelumnya"; case "next": return "halaman berikutnya <i class = 'fa-caret-right'> </i>"; kasus "terakhir": return "halaman terakhir"; Kasus "Halaman": Halaman Pengembalian; }}, toolTiptitles: function (type, page, current) {switch (type) {case "first": return "homePage"; kasus "prev": return "halaman sebelumnya"; case "Next": return "Next Page"; kasus "terakhir": return "halaman terakhir"; case "halaman": return "thread" + page + "page"; }}, pageUrl: function (type, page, current) {return "showInfosearchResult.jsp? pagenostr ="+page; // Lewati ke halaman yang dipilih}, NumberOfpages: 6, // Jumlah opsi untuk ditampilkan "Halaman mana" saat ini halaman: < %= pageno %>, // halaman saat ini totalpages: < %= totalpages %> // total halaman} $ ('#paginator'). Bootstrapplappaginator (opsi); </script> </body> </html>3. Mengenai Kelas Rekaman dan Dbutil yang digunakan dalam contoh ini:
Kelas catatan adalah kelas Java biasa yang merangkum data dan hanya menyediakan metode GET/Set. Properti -properti sesuai dengan bidang yang terkandung dalam tabel database satu per satu. Kodenya adalah sebagai berikut:
Paket PaginationExample; import java.sql.*;/*** Mengenak informasi data meteorologi* @author zhong**/catatan kelas publik {private string taizhan_num; // nama stasiun string private tem; // suhu string pribadi hum; // kelembaban string pribadi pa; // Tekan hujan string pribadi; // curah hujan string pribadi win_dir; // arah angin Private String win_sp; // Tanggal Timestamp Pribadi Kecepatan Angin; // Tanggal Pengamatan (Format Asli) /*** Dapatkan nama stasiun yang menghasilkan catatan pengamatan; * @Return Station Name*/ Public String gettaizhan_num () {return taizhan_num; } /*** Tetapkan nama stasiun yang menghasilkan catatan pengamatan; * @param taizhan_num nama stasiun yang akan diatur*/ public void settaizhan_num (string taizhan_num) {this.taizhan_num = taizhan_num; } /*** Dapatkan suhu; * @Return Suhu Nilai*/ Public String getTem () {return tem; } /*** Atur suhu; * @param Tem Nilai suhu yang akan diatur*/ public void settem (string tem) {this.tem = tem; } /*** Dapatkan kelembaban; * @return Nilai kelembaban*/ string publik gethum () {return hum; } /*** Tetapkan kelembaban; * @param hum hum untuk diatur*/ public void sethum (string hum) {this.hum = hum; } /*** Dapatkan tekanan; * @Return Tekanan Nilai*/ Public String getPa () {return pa; } /*** Tetapkan tekanan; * @param pa akan diatur*/ public void setPa (string pa) {this.pa = pa; } /*** Dapatkan curah hujan; * @Return Nilai curah hujan */ string publik getRain () {return rain; } /*** Atur curah hujan; * @param Rain akan ditetapkan nilai hujan */ public void setRain (string rain) {this.rain = rain; } /*** Dapatkan arah angin; * @return Wind Direction Value */ Public String getwin_dir () {return win_dir; } /*** Atur arah angin; * @param win_dir untuk ditetapkan nilai arah angin */ public void setwin_dir (string win_dir) {this.win_dir = win_dir; } /*** Dapatkan kecepatan angin; * @return Nilai Kecepatan Angin */ String Publik getWin_SP () {return win_sp; } /*** Atur arah angin; * @param win_sp Nilai arah angin yang akan diatur*/ public void setWin_sp (string win_sp) {this.win_sp = win_sp; } /*** Dapatkan tanggal pengamatan; * @Return Tanggal Pengamatan*/ Timestamp Publik GetDate () {Tanggal Pengembalian; } /*** Atur tanggal pengamatan; * @param tanggal pengamatan nilai*/ public void setDate (Tanggal waktu) {this.date = date; }}Tangkapan layar dari tabel alldata yang sesuai:
Kelas DBUTIL adalah kelas alat basis data yang menyediakan koneksi, pernyataan, dll yang berhubungan dengan database dengan kode berikut:
Paket PaginationExample; import java.sql. *; impor org.apache.tomcat.jdbc.pool.datasource; impor org.apache.tomcat.jdbc.pool.poolproperties;/** Kelas Database (Menggunakan Tomcat Jdbc Pool) * @A @A. DS; static {// konfigurasikan tomcat jdbc pool (koneksi pool) poolproperties p = new poolproperties (); p.setUrl ("jdbc: sqlserver: // localhost: 1433; databaseName = cuaca"); // Atur URL yang terhubung p.setDriverClassName ("com.microsoft.sqlserver.jdbc.sqlServerDriver"); // Muat driver database p.setusername ("SA"); // nama pengguna untuk koneksi jarak jauh p.setPassword ("2003NiDeriyichangxue"); // kata sandi p.setjmxenabled (true); p.settestwhileidle (false); P.Settestonborrow (true); p.setValidationQuery ("Pilih 1"); p.settestonreturn (false); p.setValidationInterval (30000); P.Settimebetweenevictionrunsmillis (30000); p.setmaxactive (100); p.setinitialsize (10); p.setmaxwait (10000); P.SetremoveAbandonedtimeout (60); p.setMinevictableIdletimemillis (30000); p.setminidle (10); p.setlogabandoned (true); P.SetremoveAbandoned (true); p.setjdbcinterceptors ("org.apache.tomcat.jdbc.pool.interceptor.connectionState;"+ "org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer"); ds = DataSource baru (); ds.setpoolproperties (p); } private dbutil () {} /*** Dapatkan koneksi database (koneksi); * @Return Database Connection */ Public Static Connection GetConnection () {Connection Conn = Null; coba {conn = ds.getConnection (); } catch (sqlexception e) {e.printstacktrace (); } return conn; } /*** Tutup koneksi yang masuk; * @param conn koneksi yang akan ditutup */ public static void tutup (koneksi conn) {coba {if (conn! = null) {conn.close (); Conn = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Tutup pernyataan yang masuk; * @param stmt pernyataan akan ditutup */ public static void tutup (pernyataan stmt) {coba {if (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Tutup hasil yang masuk; * @param rs hasil untuk ditutup */ public static void close (hasil rs) {coba {if (rs! = null) {rs.close (); rs = null; }} catch (sqlexception e) {e.printstacktrace (); }}}4. Catatan Tambahan:
①: Ketika SQLServer mengimplementasikan paging, perlu menggunakan fungsi row_number () untuk menghasilkan kolom yang mencatat nomor baris secara terpisah, sehingga dapat memfasilitasi paging selanjutnya dari interval nomor baris yang sesuai. contoh:
Saya melihat bahwa ada kolom di depan yang memiliki nomor baris bernama Num dengan nama bidang dari nomor baris;
(Jika ID kunci utama dalam tabel adalah angka bertambah secara otomatis, Anda juga dapat menggunakan ID untuk mengambil catatan dalam segmen, tetapi premisnya adalah bahwa ID harus terus menerus dan secara otomatis bertambah)
Untuk informasi lebih lanjut tentang menerapkan fungsi paging oleh row_number (), silakan merujuk ke: metode implementasi SQL Server menggunakan Row_number Paging
②: Pagination MySQL jauh lebih sederhana untuk diimplementasikan, cukup gunakan kata kunci batas. contoh:
Pilih * dari Table1 Order By ID ASC Limit 3, 2 berarti bahwa setelah mengurutkan data di Tabel1 berdasarkan Nilai ID (Urutan ASC), mulai dari baris ketiga, ambil dua baris catatan berikutnya (mis. Catatan baris keempat dan kelima)
③: Untuk penggunaan spesifik bootstrap-paginator, Anda dapat merujuk ke dokumen resmi (terletak di folder dokumen setelah dekompresi). Dokumen resmi ditulis dengan sangat baik dan sederhana dan mudah dimengerti.
Saat menggunakan versi Bootstrap V3, Anda harus menggunakan tag <ul> untuk menampilkan bootstrap-paginator, dan menunjukkan versi bootstrap yang digunakan dalam item konfigurasi (lihat metode penulisan halaman contoh JSP saya).
(Versi Bootstrap V2 dapat digunakan secara langsung menggunakan tag <div> dalam dokumen sampel)
④: Rumus yang umum digunakan untuk pagination: Misalkan jumlah halaman yang akan ditampilkan adalah n, dan m potongan data ditampilkan pada setiap halaman, kemudian posisi awal (yaitu, startindex dalam contoh JSP) dari data yang akan diambil adalah: (n-1)*M+1, dan posisi akhir (endindex) adalah: n*m*
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.