Javaee 3層アーキテクチャは、Ajax Pagination Queryを実装しています
開発環境：
ステップ1：コード実装の準備
アイデアの予備構成作業を開発する際には、インターネット上に多くの投稿があるので、ここでは繰り返しません。私は主に3つのポイントについて話します。
サーバーの構成では、赤いボックスの2つのアイテムのクラスとリソースの更新とリソースを選択する必要があります。選択した後、ホット展開を実現できます。
ここでプロジェクトの名前を記入します。プロジェクトのルートパスとして
JARパッケージをインポートする方法を図に示します。プラスサインイン依存関係をクリックし、作成したLIBフォルダーを選択します。
関連するJARパッケージのインポート：C3P0 JARパッケージ、DButilsツールクラスJARパッケージ、FastJson JARパッケージ、MySQLドライバーJARパッケージ
データベーステストの製品テーブルに次のデータを書き込む
アイデアでプロジェクトを下請けし、C3P0接続プールの構成をインポートする
C3P0構成ファイルは、独自のデータベース名とデータベースパスワードに変更する必要があることに注意してください
ドメインパッケージで、製品エンティティクラスを作成し、データベース内の製品テーブルのフィールドに基づいて、製品クラスに対応するプロパティを書き込みます。 Get Setメソッドを生成します。
接続プールオブジェクトを取得するツールクラスを作成します
ステップ2：ページングなしですべての製品情報を照会します
実装のアイデア：
JSP/HTML ----->サーブレット（Webレイヤーはリクエストと応答データを処理）--------------->サービス（サービスレイヤー処理ロジック）-----------------> DAO（DAOレイヤーハンドルデータベース操作）
製品ページを作成し、サーバーにリクエストを送信します（すべての製品情報を取得）
フロントエンドでは、ブートストラップレスポンシブ開発を使用しています。これにより、ページがより美しくなり、開発がより便利になります。
ページ情報のコードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>製品ディスプレイリスト</title> <！ - bootstrap関連ファイルの紹介 - > <link rel = "href ="/ajax_product/boottrap/cs/cs/cs/cs/cs/cs/cs/csss/csss/cs/csss/csss/ nofollow "> <script type ="/javascript "src ="/ajax_product/bootstrap/js/jquery-1.11.3.js "> </script> <script> <script> <script> <javascript" src = "/ajax_product/boottrap/js/bootstrap.js"> </spript> type = "text/javascript"> //ページが読み込まれている場合、すべての製品データ$（function（）{を受信するためにサーバーにリクエストが送信されます{ // ================================================================================================== ============================================================================================================================================== ============================================================================================================================================== ============================================================================================================= //サーバーから送信されたすべてのデータを分析しますvar protd = $（ "<tr> <td>"+products [i] .id+"</td> <td>"+製品[i] .name+"</td> <td>" .count+"</td> <td>"+duction $（ "＃tab"）。append（protd）; "json"）</scrip> <body> aLign = "center">プロモーション製品ディスプレイ</h3> <div> <！ - > <div> <div> <div> <！ - テーブルホーバーは、マウスが境界線になると、テーブルを描くことを意味します。 <tr> <th> number </th> <th>製品名</th> <th>数量</th> <th>製品数量</th> <th>製品単価</th> </tr> </table> </div> </div> </body> </html> </html>リクエストを受信し、すべての製品情報を取得するサーブレットを作成します
アイデアでは、次の図に示すようにサーブレットを作成します
ここではチェックせずに自動的に注釈を生成します
[OK]をクリックすると、Ideaは自動的にWeb.xmlファイルにジャンプし、サーブレットのフルパス名を自動的に書き込み、URL-PATTERNを書き込むだけです。
URLパターンは、AJAXリクエストのサーブレットと一致すると書く必要があることに注意してください。
Webレイヤーサーブレットのコードは次のとおりです。
パッケージcom.thc.web; import com.alibaba.fastjson.jsonobject; Import com.thc.service.productservice; Import javax.servletexception; Import javax.servlet.http.httpservlet; Import javax.servlet.http.httppservletrequest; javax.servlet.http.httpservletResponse;インポートjava.io.io.ioexception; Import java.sql.sqlexception; import java.util.list; public class products httpservlet {保護されたボイドドポスト（httpservletexception request、httpservletreletrexceponseptexcepons exception、excection except、httpservletreletreletrexceponce Carbled Code request.setcharacterencoding（ "utf-8"）; Response.setContentType（ "text/html; charset = utf-8"）; //すべての製品情報が表示されるため、受信するパラメーターはありません//すべてのデータを見つけ、結果を取得し、クライアントProductservice Service = new Procustservice（）に応答するためにメソッドを呼び出す必要はありません。 {//ビジネスレイヤーの方法を呼び出して、すべての製品リスト<com.thc.domain.product> allprouct = service.findallprouct（）を取得します。 //取得したデータをJSONタイプデータ文字列jsonstring = jsonobject.tojsonstring（allprouct）に変換します。 // browser response.getWriter（）に書き戻します。書き込み（jsonstring）; } catch（sqlexception e）{e.printstacktrace（）; }} Protected void doget（httpservletrequest request、httpservletResponse応答）servletexception、ioexception {dopost（request、response）; }}サービスレイヤーで、DAOレイヤーからデータを取得し、Webレイヤーのサーブレットに戻します
Webレイヤーのサービスレイヤーを呼び出すためのコードは次のとおりです
パッケージcom.thc.service; import com.thc.dao.productdao;インポートcom.thc.domain.product; import java.sql.sqlexception; import java.util.list; public class productervice {//サービスレイヤーで、DAOレイヤーからのデータを取得し、Public Layerのデータを取得します。 ProductDao dao = new ProductDao（）; // daoレイヤーを呼び出してすべての製品リスト<product> allproduct = dao.findallproduct（）; AllProductを返します。 }}DAOレイヤーのサーバーからデータをクエリし、サービスレイヤーを提供します
パッケージcom.thc.dao; import com.thc.domain.product; import com.thc.utils.jdbcutils; import org.apache.commons.dbutils.queryrunner; Import org.apache.commons.dbutils.handlers.beanlisception; import java.sql.sqlecception; Java.util.List; // ==================================================================================== dbutils queryrunnerコアオブジェクトqueryrunner qr = new queryrunner（jdbcutils.getDataSource（））を作成する// sqlステートメントを書き込み、すべての製品文字列sql = "select * from product"; //製品を製品に変換し、ジェネリックから製品リスト<製品>製品= Qr.Query（SQL、New BeanListhandler <>（Product.Class））;返品製品。 }}
DAOレイヤーがデータを取得した後、それをサービスレイヤーに渡します。その後、サービスレイヤーはそれをWebレイヤーのサーブレットに渡します。サーブレットがデータを取得した後、リストコレクションに保存され、リストコレクションをJSONデータ型に変換し、ブラウザに書き込みます。フロントエンドページの次のコードは、サーブレットによって返されたJSONデータを解析することです
$ .post（url、function（data）{//から送信されたすべてのデータを分析しますサーバー// ================================================================= =============================================================================== =============================================================================== =============================================================================== =============================================================================== =============================================================================== =============================================================================== ===============================================================================テーブルに追加して、テーブル$（ "＃tab"）に追加します。Google Chromeが提供するパッケージグラバーツールを通して、サーブレット応答のデータを見ることができます
次のデータであるすべての応答データをコピーします。配列には、製品オブジェクトがネストされています。
オブジェクトはすべて、キー価値のペアの形で存在します。
たとえば、最初のデータでは、キーはカウント、値は100です。キーはID、値は1、鍵は名前、値はテレビ、キーは価格、値は2000です
[{"count"：count "、" id "：1、" name "：" tv "、" rice "：2000}、{" count "：200、" id "：2、" 2、 "：" washing machine "、" rice "：1000}、{" count "：300、" id "：3、" name "：" aircondys "、" "：3000 ^ {"count"：50、 "id"：4、 "name"： "Projector"、 "frice"：2000}、{"count"：1000、 "id"：5、 "5、"： "hpコンピューター"、 "価格"：4000}、{"count"：count "：count"：100、 "id"：6、 "name"、 "apple phone"、 ""：5000 ^ {"count"：60、 "id"：7、 "name"： "seding machine"、 "rice"：2000}、{"count"：100、 "id"：8、 "name"： "xiaomi box"、 "price"：2200}、{"count"：300、 "：9、" name "：" disdenser "："： "："： "：" disdenser "： {"count"：200、 "id"：10、 "name"： "fater furifier"、 "price"：2000}、{"count"：500、 "id"：11、 "name"： "Electric Heater"、 "Price"：2000}、{"count"：100、 "id"：12、 "name"： "juicker"： "399} {"count"：200、 "id"：13、 "name"： "電気圧力炊飯器"、 "価格"：498}、{"count"：300、 "id"：14、 "name"： "rice"、 "frice"：299}、{"count"：50、 "：15、" {"count"：200、 "id"：16、 "name"： "soy milk maker"、 "rice"：199}、{"count"：300、 "id"：17、 "name"： "induction cooker"、 "frice"：398}、{"count"：500、 "：18、"： ""： "99} {"count"：250、 "id"：19、 "name"： "warzor"、 "rice"：98}、{"count"：1000、 "id"：20、 "name"： "count"：count "：count"：1200、 "id"：21、 "name"： "diapai"、 ""：88}、 {"count"：1500、 "id"：22、 "name"： "libai"、 "price"：9.9}]ページネーションがなければ、ディスプレイ効果は次のとおりです。
すべてのデータがページに表示されます。たとえば、バイドゥでキーワードを検索するなど、多くのデータがある場合、数千万または数億がある場合があります。データベースから非常に多くの結果を得て、ブラウザに多くの結果を与えるには長い時間がかかります。ユーザーエクスペリエンスは非常に低いため、ページングテクノロジーが必要です。物理的なページングが使用されます。
データベースから現在のページに必要な情報のみを一度に照会します。
ステップ3：現在のページ数とサーバーに表示されるページ数を渡す
HTMLページは、現在のページ数とページごとに表示されるページ数を増やし、サーバーに渡す必要があります
次の図に示すように、コードを変更します。
サーブレット層では、パラメーターを受信する必要があり、現在のページの対応するデータがサービスレイヤーから照会されます。コードは次のとおりです。
パブリッククラスの製品は、httpservletを拡張します{保護されたvoid dopost（httpservletrequest request、httpservletresponse応答）Servletexception、ioException {// crobled code request.setcharacterencoding（ "utf-8"）; Response.setContentType（ "text/html; charset = utf-8"）; //現在のページint pageno = integer.parseint（request.getParameter（ "pageno"））; //ページごとの表示されたエントリの数int pagesize = integer.parseint（request.getParameter（ "Pagesize"））; //すべての製品情報が表示されるため、受信するパラメーターはありません//すべてのデータを見つけ、結果を取得し、クライアントProductservice Service = new Procustservice（）に応答するためにメソッドを呼び出す必要はありません。 {//表示されているページの数と各ページの数に従って、サービスレイヤーリスト<com.thc.domain.product> product = service.findproduct（pageno、pagesize）からデータを取得します。 string jsonstring = jsonobject.tojsonstring（product）; // browser response.getWriter（）に書き戻します。書き込み（jsonstring）; } catch（sqlexception e）{e.printstacktrace（）; }} Protected void doget（httpservletrequest request、httpservletResponse応答）servletexception、ioexception {dopost（request、response）; }}サービスレイヤーに追加された現在のページデータを見つける新しい方法
パブリックリスト<Product> FindProduct（int pageno、int pagesize）throws sqlexception {productdao dao = new productdao（）;リスト<製品>製品= dao.findproduct（pageno、pagesize）;返品製品。 }DAOレイヤーに追加されたデータベースから現在のページを見つける新しい方法
public list <product> findProduct（int pageno、int pagesize）はsqlexception {queryrunner qr = new queryrunner（jdbcutils.getdatasource（））; string sql = "select * from product limit？、？"; //最初のパラメーターを制限します：データベースの場所から開始すると、インデックスは0から始まります// 2番目のパラメーター：最初のパラメーターのルールは次のとおりです。ページサイズ）; Return ProductList; }以下の図に示すように、ブラウザの側面が表示されます。ページサイズ（現在の値は6）の製品情報のみが一度に表示されます。
ただし、ページボタンをクリックしてページを動的にターンすることはできません。
次に、ページがページングバーをどのように表示し、データをカプセル化する方法を検討する必要がありますか？
ページページングバーに表示されるページの数が動的に変更されていることがわかります。ページの総数=各ページに表示されるデータ/データの総数は、上向きに丸めている必要があります。言い換えれば、リスト<product>データに加えて、ページにはデータの総数、ページの総数、現在のページ、およびページごとの表示数も必要です。さらに、現在のページのパゲノも動的に変更されます。ページには何ページがクリックされていますか？ PagenoはPagenoの数です。したがって、このデータをカプセル化してJSONデータに変換してクライアントに送信して表示するために、別のJavabean（pagebean.java）を作成する必要があります。
ステップ4：ページの関連データをJavabeanにカプセル化する
ドメインパッケージにPageBeanという名前のクラスを作成します。
Private Int Pageno; //現在のページ番号プライベートインターページサイズ; //各ページに表示されるプライベートインタートータルカウント; //合計プライベートイントトータルページには製品情報データの数;
サービスレイヤーの現在のページ数（Pageno）と各ページに表示されるページ数を渡し（Pageize）、PageBeanをWebレイヤーに返します。
Webレイヤーの最終コードは次のとおりです
パブリッククラスの製品は、httpservletを拡張します{保護されたvoid dopost（httpservletrequest request、httpservletresponse応答）Servletexception、ioException {// crobled code request.setcharacterencoding（ "utf-8"）; Response.setContentType（ "text/html; charset = utf-8"）; //現在のページint pageno = integer.parseint（request.getParameter（ "pageno"））; //ページごとの表示されたエントリの数int pagesize = integer.parseint（request.getParameter（ "Pagesize"））; //すべての製品情報が表示されるため、受信するパラメーターはありません//すべてのデータを見つけ、結果を取得し、クライアントProductservice Service = new Procustservice（）に応答するためにメソッドを呼び出す必要はありません。 { /*ビジネスレイヤーメソッドを呼び出してすべての製品リスト<com.thc.domain.product> allprouct = service.findallprouct（）;取得したデータをJSONタイプに変換します型データ文字列jsonstring = jsonobject.tojsonstring（allprouct）;*///現在のページに基づいてサービスレイヤーからデータを取得します。 //======================================================================== PageBean pageBean = service.findPageInfo(pageNo, pageSize); // =============================================================================== ============================================================================ ============================================================================ ============================================================================ jsonstring = jsonobject.tojsonstring（pagebean）; // =============================================================================================================================================================================================================================== } catch（sqlexception e）{e.printstacktrace（）; }} Protected void doget（httpservletrequest request、httpservletResponse応答）servletexception、ioexception {dopost（request、response）; }}サービスでは、PageBeanのすべての情報を取得する必要があり、PagenoとPageizeizeがわかっています。製品情報データを取得し、DAOレイヤーからコレクションをリストする必要があります。また、合計製品情報データの合計を取得する必要があります。各ページに表示され、各ページに表示され、上向きに丸められたデータによって、データの数を分割できます。
サービスレイヤーの最終コードは次のとおりです。
パブリッククラスの製品サービス{//サービスレイヤーで、DAOレイヤーからデータを取得し、Webレイヤーにデータを返します// =================================================================================================================================================================================================================== // daoレイヤーを呼び出してすべての製品リスト<product> allproduct = dao.findallproduct（）; AllProductを返します。 } //========================================================================== public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao（）;リスト<製品>製品= dao.findproduct（pageno、pagesize）;返品製品。 } // ======================================================================================================== ProductDao（）;リスト<製品>製品= 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を掛けることを忘れないでください。そうしないと、データの1ページがint totalpage =（int）math.ceil（totalcount*1.0/pageize）がありません。 pb.settotalpage（totalpage）; //サーブレットにデータを提供しますpb; }}DAOレイヤーでは、データベース情報の総数を照会するために新しい方法が追加されます。
DAOレイヤーの最終コードは次のとおりです
//============================= The dao layer is specifically responsible for database operations public class ProductDao { //========== Query all product information public List<Product> findAllProduct() throws SQLException { //Use dbutils to create the QueryRunner core object QueryRunner qr = new queryrunner（jdbcutils.getdatasource（））; //すべての製品文字列sql = "select * from product"; //製品をリストコレクションに変換すると、ジェネリックは製品リスト<製品>製品= qr.query（sql、new beanlisthandler <>（product.class））;返品製品。 }//================================================= public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()); string sql = "select * from product limit？、？"; //最初のパラメーターを制限：データベースで開始する場所、インデックスは0から始まります// 2番目のパラメーター：最初のパラメーターのルールは次のとおりです。ページサイズ）; Return ProductList; } // =============クエリにはいくつのデータがありますか？ ======================================================= sqlexception {queryrunner qr = new queryrunner（jdbcutils.getdatasource（）; string sql = "count（*）from product"; long countl =（long）qr.query（sql、new scalarhandler（））; countl.intvalue（）を返します。 }}ステップ5：フロントエンドページを処理します
テーブルタグの下に、ラインを追加してページングコンポーネントを提供します。動的に表示する必要があるため、LIコードにコメントしてください。
最初に受信するパラメーター変数を宣言します
var url = "/ajax_product/product"; var pageno = 1; //現在のページは1var pagesize = 6; //各ページに6つの製品情報varページを表示します;
AJAXのPOSTリクエストを記述した後、パケットキャプチャはブラウザがデータを受信するかどうかをテストします。
$ .post（url、//サーバーに送信されたデータのアドレス{"pageno"：pageno、 "pagesize"：pagesize}、//現在のページ数とページ関数ごとに表示されるピースの数（データ）{}）パケットをキャッチした後、次のデータを取得しました
{"Pageno"：1、 "Pagesize"：6、 "Products"：[{"count"： "count"：100、 "id"：1、 "name"： "tv"、 "price"：2000}、{"count"：200、 "id"：2、 "name"： "洗濯機"、 "価格"：1000}、{count "：" 300、 "3、" ""コンディショナー "、"価格 "：3000}、{" count "：50、" id "：4、" name "：" Projector "、" price "：2000}、{" count "：1000、" id "：5、" name "：" hp Computer "、" price "：4000}、{count"： "count"：100、 ""： ""： ""： ""： "" 「TotalCount」：22、「TotalPage」：3}これは、サーバー側が正常にブラウザに応答できることを意味します。次に、フロントエンドコードを書きます
テーブルにデータを表示します
最初にバックエンドで取得したデータを解析し、次にJSコードに同期し、PageBean.Productsを介してすべての製品オブジェクトのデータを取得し、この配列を繰り返し、製品属性の値をテーブルにスプライスします。
コードは次のとおりです
$ .post（url、//サーバーに送信されたデータのアドレス{"pageno"：pageno "、" pageize "：pagesize}、//ページ数とページごとに表示されるピースの数は、ブラウザー機能に送信されます（データ）{//サーバー= Data = varのsynthat is the insmat is in syrsmat is the syrsmat is the syrsmat is in syver data = syrsem pageno = pageno = pagebean.pagebean.totalpage; ================================================================================================================== ================================================================================================================== ================================================================================================================== ================================================================================================================== for（var i = 0; i <products.length; i ++）{// Data data var protd = $（ "<tr> <td>"+products [i] .id+"</td> <td>"+products [i] .name+"</td> <td>"+products [i] .count+"</td> <td> <td> <td> <td> <td> <td> </td> </tr> "）; //テーブルに追加し、テーブル$（"＃tab "）。append（protd）;}}、" Json "）にデータを追加します。このコードを記述した後、サーバーをオンにして、データをテーブルに取得できるかどうかをテストできます。データは、テスト後に正常に表示されます。
ページバーのデータを表示します
最初に前のページのデータと次のページを表示します
//ページバーのデータを表示//関数を考慮していない、最初に表示することができます。/前のページを表示することができます//ページ</a> </li> '）; // $（ "。ページャー"）を追加します。付録（preli）; //次のページを表示var nextli = $（' <li> <a href = "rel =" real = "external nofollow" rel = "ページ</a> </li> '）; // $（ "。ページャー"）。append（nextli）;
テスト結果は次のとおりです。
ページ番号の表示データ：
ページバーのデータを表示//関数を考慮していない、最初に表示することができます。/前のページを表示することができますPage </a> </li> '）; // $（ "。Pager"）。Append（preli）; //ページ番号を（var i = 1; i <= totalpage; i ++）{// create li tag li = $（' <li> <a href = "＃" rel = "lean nofolow" relow "relow" relow "relow" relow "relow" rel = "外部nofollow" rel = "external nofollow"> '+i+' </a> </li> '）; //クラスセレクター$（ "。ページャー"）。append（li）;}を介してULに追加しますvar nextli = $（ '<li> <a href = "＃" rel = "real =" reconter nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "loter" relolow "rel" relolow "relolow" real = "real nofollow" external nofollow "external nofollow" rel = "external nofollow">次ページ</a> </li> '）; // add $（ "。pager"）。append（nextli）;効果は、下の図に示されています。
現在のページが強調表示されています
ページャークラスはブートストラップでのハイライトをサポートしていないため、ページネーションクラスはページネーションに置き換えられます。
強調表示の論理は、移動するときの現在のページ（Pageno）であるかどうかを判断することです。
LIタグにクラスのアクティブ属性を追加します
//ページ番号を（var i = 1; i <= totalpage; i ++）{var li; if（i === pageno）{// ============================= > '+i+' </a> </li> '）; //クラスセレクター$（ "。ページネーション"）を介してULに追加します（li）; } else {// =================== li = $（ '<li> <a href = "＃" rel = "returation nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" rel = " //クラスセレクター$（ "。ページネーション"）を介してULに追加します（li）; }}効果は次のとおりです
ページ番号にクリックイベントを追加し、データを切り替えます。
現在のページにはクリックイベントは必要ありません
ページ数のAタグにオンクリックイベントを追加し、skippage（）関数にバインドします。 Skippage（）関数の操作は、実際には、最初のページデータを取得したときにAjax Postリクエストをサーバーに送信する操作です。したがって、 $（function（）{}）のコードをskippage（）関数にコピーし、ページが読み込まれたらskippage（）関数を呼び出します。 1を渡すことは、ページ1のデータがデフォルトでロードされることを意味します。この時点で、$（function（）{}）は1回のみ実行されます。 Skippage（）は再帰関数になり、それ自体を呼び出します。ただし、シングルクリックイベントでは、Javaの再帰とは異なるSkippageメソッドを1回だけ呼び出します。
このコードを実行した後、さまざまなコードをクリックして、テーブルとページバーのコンテンツが継続的に重ねられていることを確認します。
下の図に示すように：
データがロードされるたびにデータをクリアします。ページバーをクリアします
ページバーをクリアするためにコードを追加した後、ページバーが重ねられていないことがわかりましたが、テーブルはまだ重ねられています。
フォームをクリアします
$("#tab").empty();テーブルの明確なコードを実行した後、次の現象を見つけました。
テーブルの最初の行がなくなったため、セレクターを使用して最初の行を除外する必要があります。
$（ "＃tab tr：not（：first）"）は意味します
最初にIDセレクターに従ってテーブルを選択します
次に、階層セレクターから、tr行を選択します
基本セレクターは最初に基本セレクターにネストされていません。つまり、最初の行ではありません
全体的な意味は、テーブルが最初の行でない場合、empty（）メソッドが呼び出され、一致する要素コレクションのすべての子ノードを削除することです。
テスト後、データの最初の行を削除できます
前のページで利用可能かどうかを判断し、ページ番号を切り替えます
現在のページが最初のページの場合、前のページ関数は使用できません。
現在のページが最初のページでない場合は、クリックイベントを追加し、前のページに切り替えて、ページ番号を1つ削減します。
//前のページを表示し、Var Preliが利用可能かどうかを判断します。 if（pageno === 1）{//現在のページが最初のページである場合、前のページの関数は利用できませんpreri = $（ '<li> <a href = "javascript：void（0）" rel = "real =" real nofollow "rel =" external nofollow "rel =" ferternal nofollow "real =" rel "rel" rel "rel" rel = "relow" real = "relow" real " nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "real" rel "rel" rel = "real =" real = "real =" external nofollow " nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "real" rel "rel" rel = "real =" real = "real =" external nofollow " nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow ">前のページ</a> </li> '）;} nofollow "rel =" external nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "onclicagページ</a> </li> '）;} //クラスセレクターを使用し、$（ "。ページネーション"）を追加します。次のページで使用できるかどうかを判断し、ページ番号を切り替えます
現在のページが最後のページの場合、前のページ関数は使用できません。
現在のページが最後のページでない場合は、クリックイベントを追加し、次のページに切り替えて、ページ番号を追加します。
//次のページを表示し、Var Nextliが利用可能かどうかを判断します。 if（pageno === totalpage）{//現在のページが最後のページの場合、前のページの関数は使用できません。 nextli = $（ '<li> <a href = "javascript：void（0）" rel = "returation nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "rel =" rel = "relow" relow "relow" 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" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel = "external nofollow" rel = "returation nofollow" rel = "external nofollow" rel = "returation no>次のページ</a> </li> '）;} else {// 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をもっとサポートすることを願っています。