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をもっとサポートすることを願っています。