この記事では、bootstrapテーブルの使い方を参考までに紹介します。具体的な内容は次のとおりです。 公式サイト情報 効果画像:例:html <!-- 表 --> <テーブル id="ffServerSystemCheckListTable" データ ツールバー="#toolbar" データ表示列="true" データ表示列切り替えすべて="true"> <%-- <ヘッド>--%> <%-- <tr>--%> <%-- <th データフィールド="cityName">ID</th>--%> <%-- <th data-field="cityName">アイテム名</th>--%> <%-- <th data-field="cityName">商品価格</th>--%> <%-- </tr>--%> <%-- </thead>--%> </テーブル> ジャバスクリプト $(ドキュメント).ready(関数() { //テーブルプラグイン mytable=$('#ffServerSystemCheckListTable').bootstrapTable({ //リクエストメソッド method: 'post', //json 型 データ型: "json", コンテンツタイプ: "application/x-www-form-urlencoded", //検索ボタンを表示する //showSearch: false, //更新ボタンを表示する showRefresh: false, //電話ビュー切り替えボタンを表示する showToggle: false, //コンテンツ列のドロップダウンボックスを表示する showColumns: false, //ボタンをどこにでも表示する showExport: false, //ページング切り替えボタンを表示する showPaginationSwitch: false, // 少なくとも2行表示 minimumCountColumns: 2, //行間隔の色を表示するかどうか//striped: true, //キャッシュを使用するかどうか。デフォルトは true なので、通常はこのプロパティを設定する必要があります (*) キャッシュ: false、 //ページングを表示するかどうか(*) ページネーション: true、 //ソート方法 sortOrder: "asc", //最初のページの読み込みを初期化します。デフォルトの最初のページは pageNumber: 1 です。 //ページあたりの行数 (*) ページサイズ: 10, //選択可能なページあたりの行数 (*) ページリスト: [10, 25, 50, 100], //このインターフェースは、ブートストラップ テーブルから渡された固定パラメータを処理し、特定の形式の json データを返す必要があります。url: "${ctx}/ff/server/ffServerSystemCheck/data", //デフォルト値は「limit」で、サーバーに渡されるパラメータはlimit、offset、search、sort、orderです。 //クエリパラメータタイプ:''、 クエリパラメータ、各呼び出しはこのパラメータを運びます、queryParamsをカスタマイズできます: function (params) { var searchParam = $("#searchForm").serializeJSON(); searchParam.pageNo = params.limit === 未定義? "1" : params.offset / params.limit + 1; searchParam.pageSize = params.limit === 未定義ですか? -1 : params.limit; searchParam.orderBy = params.sort === 未定義? "" : params.sort + " " + params.order; searchParam を返します。 }, //ページング モード: クライアント ページング、サーバー ページング (*) サイドページネーション: "サーバー", // contextMenuTrigger:"right", // PC の右ボタンを押してメニューをポップアップします // contextMenuTriggerMobile: "press", // 携帯電話でメニューをポップアップします。click: シングルクリック、press: 長押し。 // コンテキストメニュー: '#context-menu', onClickRow: 関数 (行、$el) { 行ID = 行ID; }, onShowSearch: 関数 () { $("#検索折りたたみ").slideToggle(); }, responseHandler: function (res){//他のパラメータを受け取るために使用されます。 return res; }, onPreBody: 関数 (res) {}, onLoadSuccess: 関数() {}, onPostHeader: 関数 () {}, onAll: 関数 () {}, 列: [ [ { フィールド: 'cityName', タイトル:「シティカンパニー」 行スパン: 2, フォーマッタ: 関数 (値、行、インデックス) { 戻り値; } } 、{ フィールド: 'プロジェクト名', タイトル: 'プロジェクト名'、 行スパン: 2 }, { タイトル:「ホームページカルーセル」 列幅: 2, 配置: '中央' }, { タイトル: 「メッセージ」 列幅: 2, 配置: '中央' }, { タイトル:「ポスターテンプレート」 列幅: 2, 配置: '中央' }, { タイトル: 「不動産ダイナミクス」 列幅: 2, 配置: '中央' }, { タイトル: 「プロジェクトのセールスポイント」 列幅: 2, 配置: '中央' }, { タイトル: 「プロジェクトポスター」 列幅: 2, 配置: '中央' }, { タイトル:「プロジェクトビデオ」 列幅: 2, 配置: '中央' }], [{ フィールド: 'newsCount', タイトル: 「更新時間」 } 、{ フィールド: 'newsState', タイトル:"-"、 クラス:'newsTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; // jp.getDictLabel(${fns:toJson(fns:getDictList('cooperation_flag'))}, value, "-" を返します。 } } 、{ フィールド: 'msgCount', タイトル: 「更新時間」 } 、{ フィールド: 'msgState', タイトル: '-'、 クラス:'msgTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } } 、{ フィールド: 'tempCount', タイトル: 「更新時間」 }, { フィールド: 'tempState', タイトル: '-'、 クラス:'tempTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } }, { フィールド: 'houseCount', タイトル: 「更新時間」 }, { フィールド: 'houseState', タイトル: '-'、 クラス:'houseTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } }, { フィールド: 'sellCount', タイトル: 「更新時間」 }, { フィールド: 'sellState', タイトル: '-'、 クラス:'sellTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } }, { フィールド: 'postCount', タイトル: 「更新時間」 }, { フィールド: 'postState', タイトル: '-'、 クラス:'postTitle', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } }, { フィールド: 'videoCount', タイトル: 「更新時間」 } 、{ フィールド: 'videoState', タイトル: '-'、 クラス:'ビデオタイトル', フォーマッタ: 関数 (値、行、インデックス) { if (値=='不適格') { "<span style=\"color: red;\">不適格<span>" を返します。 } 戻り値; } } ] ] }); if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//モバイル端末の場合$('#ffServerSystemCheckListTable').bootstrapTable("toggleView"); } $('#ffServerSystemCheckListTable').on('チェックbs.table チェックなしbs.table ロード成功bs.table ' + 'check-all.bs.table uncheck-all.bs.table'、関数(){ $('#remove').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length); $('#batchSet').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length); $('#view,#edit').prop('disabled', $('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length != 1); }); // クエリボタンをバインド $("#search").click("click", function () { //テーブルパラメータを再読み込み// $('#ffServerSystemCheckListTable').bootstrapTable("refreshOptions", { // //url : path + "/api/peopledataInfo/getPeopleInfoList", // データを取得するアドレス// columns : [], // // }); //動的ヘッダー設定 $.ajax({ url: "${ctx}/ff/server/ffServerSystemCheck/checkInfo", // タイプ: "POST", データ: $("#searchForm").serialize(), 成功: 関数 (データ) { $(".newsTitle .th-inner").html(data.newsTitle); $(".msgTitle .th-inner").html(data.msgTitle); $(".tempTitle .th-inner").html(data.tempTitle); $(".houseTitle .th-inner").html(data.houseTitle); $(".sellTitle .th-inner").html(data.sellTitle); $(".postTitle .th-inner").html(data.postTitle); $(".videoTitle .th-inner").html(data.videoTitle); $('#ffServerSystemCheckListTable').bootstrapTable('更新'); } }); }); }); ジャワ コントローラ: @レスポンス本文 @RequestMapping(値 = "データ") パブリック Map<String, Object> データ (HttpServletRequest リクエスト、HttpServletResponse レスポンス) { Page<FfServerSystemCheck> page = server.findWebPage(new Page<FfServerSystemCheck>(request, response)); Map<String, Object> map = new HashMap<String, Object>(); map.put("行", page.getList()); map.put("合計", page.getCount()); データを返します。 } xml: <select id="findWebList" resultType="com.jeeplus.modules.ff.server.entity.FfServerSystemCheck"> <if test="dateTypeAll == '0'.toString() または dateTypeAll == '1'.toString() または dateTypeAll=='yesterday' または dateTypeAll=='today'"> 選択 都市名、 プロジェクト名、 ニュースカウント、 '-' ニュースステート、 メッセージ数、 '-' メッセージ状態、 tempCount、 '-' tempState、 家数、 '-' ハウス州、 販売数、 '-' 販売状態、 投稿数、 '-' 投稿状態、 ビデオカウント、 '-' ビデオ状態 </if> <if test="dateTypeAll == 'weeks' または dateTypeAll == 'month' または dateTypeAll=='halfYear' または dateTypeAll=='years'"> 選択 都市名、 プロジェクト名、 ニュースカウント、 newsCount > #{newsNum} の場合、「適格」、そうでない場合、「不適格」、終了 newsState、 メッセージ数、 CASE WHEN msgCount > #{msgNum} THEN 'Pass' ELSE 'Fail' END msgState、 tempCount、 CASE WHEN tempCount > #{tempNum} THEN 'Qualified' ELSE 'Unqualified' END tempState, 家数、 CASE WHEN houseCount > #{houseNum} THEN 'Qualified' ELSE 'Unqualified' END houseState, 販売数、 sellCount > #{sellNum} の場合、「適格」、そうでない場合、「不適格」、終了 sellState、 投稿数、 postCount > #{postNum} の場合、「適格」、そうでない場合、「不適格」、終了 postState、 ビデオカウント、 CASE WHEN videoCount > #{videoNum} THEN 'Qualified' ELSE 'Unqualified' END videoState </if> から ( 選択 so.NAME 都市名、 pm.project_name プロジェクト名、 ( SELECT count(*) FROM ff_server_news_manage WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) ニュースカウント、 ( SELECT count(*) FROM ff_server_message_manage WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) メッセージ数、 ( SELECT count(*) FROM ff_tuoke_poster_template WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) tempCount、 ( SELECT count(*) FROM ff_server_houses_dynamic WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) ハウスカウント、 ( SELECT count( CASE WHEN type = 0 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) 販売数、 ( SELECT count( CASE WHEN type = 1 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) 投稿数、 ( SELECT count( CASE WHEN type = 2 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id <if test="startDate != null かつ startDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]> #{startDate} </if> <if test="endDate != null かつ endDate != ''"> AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]> #{endDate} </if> ) ビデオ数 から sys_office そう ff_server_project_manage pm を pm.city_company = so.id に内部結合します。 <どこ> ${データスコープ} <if test="cityCompanyId != null かつ cityCompanyId != ''"> かつ so.id = #{cityCompanyId} </if> </どこ> グループ化 pm.プロジェクト名 ORDER BY pm.create_date DESC )として </選択> ページオブジェクト /** * Copyright © 2015-2020 <a href="http://www.jeeplus.org/" rel="external nofollow" >JeePlus</a> 無断転載を禁じます。 */ パッケージ com.jeeplus.core.persistence; java.util.ArrayList をインポートします。 java.util.List をインポートします。 java.util.regex.Pattern をインポートします。 javax.servlet.http.HttpServletRequest をインポートします。 javax.servlet.http.HttpServletResponse をインポートします。 org.apache.commons.lang3.StringUtils をインポートします。 com.fasterxml.jackson.annotation.JsonIgnore をインポートします。 com.jeeplus.common.config.Global をインポートします。 com.jeeplus.common.utils.CookieUtils をインポートします。 /** * ページネーションクラス * @author jeeplus * @バージョン 2016-7-2 * @param <T> */ パブリッククラス Page<T> { protected int pageNo = 1; // 現在のページ番号 protected int pageSize = Integer.valueOf(Global.getConfig("page.pageSize")); // ページ サイズ。ページングなしを示すには「-1」に設定します (ページングは無効です) protected long count;//レコードの合計数。合計数が照会されないことを示すために「-1」に設定されています protected int first;//ホームページのインデックス protected int last;//終了ページのインデックス protected int prev;//前のページのインデックス protected int next;//次のページのインデックス private boolean firstPage;//最初のページかどうか private boolean lastPage;//最後のページかどうか protected int length = 8;//表示ページの長さ protected int slider = 1;//前と次の表示ページの長さ private List<T> list = new ArrayList<T>(); private String orderBy = ""; // 標準クエリは有効です。例: updatedate desc、name asc protected String funcName = "page"; // ページ番号をクリックしたときに呼び出される js 関数の名前を設定します。デフォルトは page で、ページに複数のページング オブジェクトがある場合に使用されます。 protected String funcParam = ""; // 追加の関数パラメータ、3 番目のパラメータ値。 private String message = ""; // 「合計 n 項目」の後に表示されるプロンプトメッセージを設定します public Page() { this.pageSize = -1; } /** * 構築方法* @param request はページ番号を記憶するための repage パラメータを渡します* @param response は Cookie を設定しページ番号を記憶するために使用されます*/ パブリックページ(HttpServletRequest リクエスト、HttpServletResponse レスポンス){ this(リクエスト、レスポンス、-2); } /** * 構築方法* @param request はページ番号を記憶するための repage パラメータを渡します* @param response はページ番号を記憶するための Cookie を設定するために使用されます* @param defaultPageSize デフォルトのページング サイズ。-1 が渡された場合、ページングは実行されず、すべてのデータが返されます*/ パブリックページ(HttpServletRequest リクエスト、HttpServletResponse レスポンス、int defaultPageSize){ // ページ番号パラメータを設定します(ページ番号を記憶するために repage パラメータを渡します) 文字列 no = request.getParameter("pageNo"); StringUtils.isNumeric(no)の場合{ CookieUtils.setCookie(レスポンス、「pageNo」、no); this.setPageNo(Integer.parseInt(no)); }そうでない場合 (request.getParameter("repage")!=null){ いいえ = CookieUtils.getCookie(リクエスト、「ページ番号」); StringUtils.isNumeric(no)の場合{ this.setPageNo(Integer.parseInt(no)); } } // ページ サイズ パラメータを設定します (ページ サイズを記憶するために repage パラメータを渡します) 文字列サイズ = request.getParameter("pageSize"); if (StringUtils.isNumeric(サイズ)){ CookieUtils.setCookie(レスポンス、「pageSize」、サイズ); this.setPageSize(Integer.parseInt(size)); }そうでない場合 (request.getParameter("repage")!=null){ いいえ = CookieUtils.getCookie(リクエスト、「pageSize」); if (StringUtils.isNumeric(サイズ)){ this.setPageSize(Integer.parseInt(size)); } }そうでない場合 (defaultPageSize != -2){ this.pageSize = デフォルトのページサイズ; }そうでない場合 ("-1".equals(size)){ this.pageSize = -1; } // 並べ替えパラメータを設定します。String orderBy = request.getParameter("orderBy"); StringUtils.isNotBlank(orderBy)の場合{ this.setOrderBy(orderBy); } } /** * コンストラクタ* @param pageNo 現在のページ番号* @param pageSize ページングサイズ*/ パブリックページ(intページ番号、intページサイズ) { this(ページ番号、ページサイズ、0); } /** * 構築方法* @param pageNo 現在のページ番号* @param pageSize ページングサイズ* @param count データ項目数*/ パブリックページ(intページ番号、intページサイズ、longカウント) { this(ページ番号、ページサイズ、カウント、新しいArrayList<T>()); } /** * 構築方法* @param pageNo 現在のページ番号* @param pageSize ページングサイズ* @param count データ項目数* @param list このページのデータオブジェクトのリスト*/ パブリックページ(intページ番号、intページサイズ、longカウント、List<T>リスト) { this.setCount(カウント); this.setPageNo(ページ番号); ページサイズ = ページサイズ; this.list = リスト; } /** * 初期化パラメータ */ パブリックボイド初期化() { //1 1 番目 this.last = (int)(count / (this.pageSize < 1 ? 20 : this.pageSize) + first - 1); this.count % this.pageSize != 0 || this.last == 0 の場合 { this.last++; } (this.last < this.first)の場合{ this.last = this.first; } (this.pageNo <= 1) の場合 { this.pageNo = this.first; this.firstPage=true; } (this.pageNo >= this.last) の場合 { this.pageNo = this.last; this.lastPage = true; です。 } (this.pageNo < this.last - 1) の場合 { this.next = this.pageNo + 1; } それ以外 { this.next = this.last; } (this.pageNo > 1) の場合 { this.prev = this.pageNo - 1; } それ以外 { this.prev = this.first; } //2 if (this.pageNo < this.first){// 現在のページがホームページより小さい場合は this.pageNo = this.first; } if (this.pageNo > this.last){// 現在のページが最後のページより大きい場合、this.pageNo = this.last; } } /** * デフォルトで現在のページタグを出力します* <div class="page">${page}</div> */ @オーバーライド パブリック文字列toString() { StringBuilder sb = 新しい StringBuilder(); sb.append("<div class=\"fixed-table-pagination\" style=\"display: block;\">"); // sb.append("<div class=\"dataTables_info\">"); // sb.append("<li class=\"disabled controls\"><a href=\"javascript:\">現在"); // sb.append("<input type=\"text\" value=\""+pageNo+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)"); // sb.append(funcName+"(this.value,"+pageSize+",'"+funcParam+"');\" onclick=\"this.select();\"/> / "); // sb.append("<input type=\"text\" value=\""+pageSize+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)"); // sb.append(funcName+"("+pageNo+",this.value,'"+funcParam+"');\" onclick=\"this.select();\"/>,"); // sb.append("合計" + count + ""+(message!=null?message:"")+"</a></li>\n"); // sb.append("</div>"); long 開始インデックス = (ページ番号-1)*ページサイズ + 1; long endIndex = ページ番号*ページサイズ <=count? ページ番号*ページサイズ:count; sb.append("<div class=\"pull-left pagination-detail\">"); sb.append("<span class=\"pagination-info\">"+startIndex+" から "+ endIndex +" までのレコードを表示します。合計 "+count+" 件のレコード</span>"); sb.append("<span class=\"page-list\">ページごとに表示<span class=\"btn-group dropup\">"); sb.append("<button type=\"button\" class=\"btn btn-default btn-outline dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">"); sb.append("<span class=\"page-size\">"+pageSize+"</span> <span class=\"caret\"></span>"); sb.append("</button>"); sb.append("<ul class=\"dropdown-menu\" role=\"menu\">"); sb.append("<li class=\""+getSelected(pageSize,10)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",10,'"+funcParam+"');\">10</a></li>"); sb.append("<li class=\""+getSelected(pageSize,25)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",25,'"+funcParam+"');\">25</a></li>"); sb.append("<li class=\""+getSelected(pageSize,50)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",50,'"+funcParam+"');\">50</a></li>"); sb.append("<li class=\""+getSelected(pageSize,100)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",100,'"+funcParam+"');\">100</a></li>"); sb.append("</ul>"); sb.append("</span> レコード</span>"); sb.append("</div>"); // sb.append("<p>各ページ<select onChange=\""+funcName+"("+pageNo+",this.value,'"+funcParam+"');\"" +"style=\"display:display !important;\" class=\"form-control mb input-sm\">" + // "<option value=\"10\" "+getSelected(pageSize,10)+ ">10</option>" + // "<option value=\"25\" "+getSelected(pageSize,25)+ ">25</option>" + // "<option value=\"50\" "+getSelected(pageSize,50)+ ">50</option>" + // "<option value=\"100\" "+getSelected(pageSize,100)+ ">100</option>" + // "</select> レコード、「+startIndex+」から「+ endIndex +」レコードを表示し、合計「+count+」レコードになります</p>"); // sb.append("</div>"); // sb.append("</div>"); sb.append("<div class=\"pull-right pagination-roll\">"); sb.append("<ul class=\"pagination pagination-outline\">"); if (pageNo == first){// ホームページの場合 sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n"); sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-left\"></i></a></li>\n"); } それ以外 { sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+first+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n"); sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+prev+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-left\"></i></a></li>\n"); } int begin = ページ番号 - (長さ / 2); if (begin < first) { 始める = 最初; } int 終了 = 開始 + 長さ - 1; if (終了 >= 最後) { end = 最後; 開始 = 終了 - 長さ + 1; if (begin < first) { 始める = 最初; } } if (begin > first) { 整数 i = 0; (i = first; i < first + slider && i < begin; i++) { sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">" + (i + 1 - 最初) + "</a></li>\n"); } もし(i < 開始){ sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n"); } } (int i = 開始; i <= 終了; i++) { if (i == ページ番号) { sb.append("<li class=\"paginate_button active\"><a href=\"javascript:\">" + (i + 1 - 最初) + "</a></li>\n"); } それ以外 { sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">" + (i + 1 - 最初) + "</a></li>\n"); } } if (last - end > スライダー) { sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n"); end = 最後 - スライダー; } (int i = end + 1; i <= last; i++) の場合 { sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">" + (i + 1 - 最初) + "</a></li>\n"); } ページ番号 == 最後) の場合 { sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-right\"></i></a></li>\n"); sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-right\"></i></a></li>\n"); } それ以外 { sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+next+","+pageSize+",'"+funcParam+"');\">" + "<i class=\"fa fa-angle-right\"></i></a></li>\n"); sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+last+","+pageSize+",'"+funcParam+"');\">" + "<i class=\"fa fa-angle-double-right\"></i></a></li>\n"); } sb.append("</ul>"); sb.append("</div>"); sb.append("</div>"); // sb.insert(0,"<ul>\n").append("</ul>\n"); // sb.append("<div style=\"clear:both;\"></div>"); // sb.insert(0,"<div class=\"page\">\n").append("</div>\n"); sb.toString() を返します。 } 保護された文字列 getSelected(int pageNo, int selectedPageNo){ if(ページ番号 == 選択されたページ番号){ //「選択された」を返します。 「アクティブ」を返します。 }それ以外{ 戻る ""; } } /** * ページネーションHTMLコードを取得 * @return */ パブリック文字列getHtml(){ toString() を返します。 } // パブリック静的void main(String[] args) { // Page<String> p = new Page<String>(3, 3); // System.out.println(p); // System.out.println("ホーム: "+p.getFirst()); // System.out.println("最後のページ: "+p.getLast()); // System.out.println("前のページ: "+p.getPrev()); // System.out.println("次のページ: "+p.getNext()); // } /** * 設定の総数を取得する * @return */ パブリックlong getCount() { カウントを返します。 } /** * データの総数を設定する * @param count */ パブリック void setCount(long count) { this.count = カウント; ページサイズ >= カウントの場合{ ページ番号 = 1; } } /** * 現在のページ番号を取得します * @return */ パブリック int getPageNo() { ページ番号を返します。 } /** * 現在のページ番号を設定します * @param pageNo */ パブリック void setPageNo(int pageNo) { this.pageNo = ページNo; } /** * ページサイズを取得する * @return */ パブリック int getPageSize() { pageSize を返します。 } /** * ページサイズの設定(最大500) * @param ページサイズ */ パブリック void setPageSize(int pageSize) { this.pageSize = pageSize <= 0 ? 10 : pageSize; // > 500 ? 500 : pageSize; } /** * ホームページインデックス * @return */ @Json無視 パブリック int getFirst() { 最初に戻ります。 } /** * 最終ページインデックス * @return */ @Json無視 パブリックint getLast() { 最後を返します。 } /** * ページの総数を取得します * @return getLast(); */ @Json無視 パブリック int getTotalPage() { getLast() を返します。 } /** * 最初のページですか? * @return */ @Json無視 パブリックブールisFirstPage() { firstPage を返します。 } /** * 最後のページですか? * @return */ @Json無視 パブリックブールisLastPage() { lastPage を返します。 } /** * 前のページのインデックス値 * @return */ @Json無視 パブリック int getPrev() { if (isFirstPage()) { ページ番号を返します。 } それ以外 { ページ番号 1 を返します。 } } /** * 次のページのインデックス値 * @return */ @Json無視 パブリック int getNext() { if (isLastPage()) { ページ番号を返します。 } それ以外 { ページ番号 + 1 を返します。 } } /** * このページのデータオブジェクトリストを取得します * @return List<T> */ パブリックリスト<T> getList() { リストを返します。 } /** * このページのデータオブジェクトリストを設定します * @param list */ パブリック Page<T> setList(List<T> リスト) { this.list = リスト; 初期化します。 これを返します。 } /** * クエリソート文字列を取得する * @return */ @Json無視 パブリック文字列 getOrderBy() { // インジェクションを防ぐための SQL フィルタリング String reg = "(?:')|(?:--)|(/\\*(?:.|[\\n\\r])*?\\*/)|" + "(\\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|into|drop|execute)\\b)"; パターン sqlPattern = Pattern.compile(reg, Pattern.CASE_INSENSITIVE); if (sqlPattern.matcher(orderBy).find()) { 戻る ""; } orderBy を返します。 } /** * クエリのソートを設定します。標準クエリが有効です。例: updatedate desc、name asc */ パブリック void setOrderBy(文字列 orderBy) { this.orderBy = orderBy; } /** * ページ番号をクリックして呼び出される js 関数の名前を取得します* function ${page.funcName}(pageNo){location="${ctx}/list-${category.id}${urlSuffix}?pageNo="+i;} * @戻る */ @Json無視 パブリック文字列 getFuncName() { funcName を返します。 } /** * ページ番号をクリックしたときに呼び出される js 関数の名前を設定します。デフォルトは page で、1 ページに複数のページング オブジェクトがある場合に使用されます。 * @param funcNameのデフォルトはpage */ パブリック void setFuncName(String funcName) { this.funcName = funcName; } /** * ページング関数の追加パラメータを取得します * @return */ @Json無視 パブリック文字列 getFuncParam() { funcParam を返します。 } /** * ページング機能の追加パラメータを設定する * @return */ パブリック void setFuncParam(String funcParam) { this.funcParam = funcParam; } /** * 「合計 n 項目」の後に表示されるプロンプト メッセージを設定します。* @param message */ パブリック void setMessage(文字列メッセージ) { this.message = メッセージ; } /** * ページングは有効ですか? * @return this.pageSize==-1 */ @Json無視 パブリックブール値isDisabled() { this.pageSize==-1 を返します。 } /** * 合計数をカウントするかどうか* @return this.count==-1 */ @Json無視 パブリックブール値isNotCount() { this.count==-1 を返します。 } /** * Hibernate FirstResult を取得する */ パブリック int getFirstResult(){ int firstResult = (getPageNo() - 1) * getPageSize(); (firstResult >= getCount() || firstResult<0) の場合 { 最初の結果 = 0; } firstResult を返します。 } /** * Hibernate MaxResultsを取得する */ パブリック int getMaxResults(){ getPageSize() を返します。 } // /** // * SpringデータJPAページングオブジェクトを取得します // */ // パブリックページング可能なgetSpringPage(){ // List<Order> orders = new ArrayList<Order>(); // if (orderBy!=null){ // for (文字列の順序: StringUtils.split(orderBy, ",")){ // String[] o = StringUtils.split(order, " "); // o.length==1の場合{ // orders.add(新しいOrder(Direction.ASC, o[0])); // }それ以外の場合 (o.length==2){ // if ("DESC".equals(o[1].toUpperCase())){ // orders.add(新しいOrder(Direction.DESC, o[0])); // }それ以外{ // orders.add(新しいOrder(Direction.ASC, o[0])); // } // } // } // } // 新しい PageRequest(this.pageNo - 1、this.pageSize、新しい Sort(orders)) を返します。 // } // // /** // * SpringデータJPAページングオブジェクトを設定し、このシステムのページングオブジェクトに変換します // */ // パブリック void setSpringPage(org.springframework.data.domain.Page<T> ページ){ // this.pageNo = page.getNumber(); // this.pageSize = page.getSize(); // this.count = page.getTotalElements(); // this.list = page.getContent(); // } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル
>>: nginxリバースプロキシのマルチポートマッピングの実装
js 日付時刻形式日付と時刻を指定された形式に変換します。例: YYYY-mm-dd HH:MM は...
目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...
参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...
目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...
概要: MySQL のパフォーマンス最適化について話すとき、誰もがクエリ パフォーマンスを向上させる...
その特性は次のとおりです。方向アクティブな字幕のスクロール方向を設定するコードは次のとおりです。 &...
Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...
最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...
リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...
まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...
Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...
1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...
前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...