ブートストラップテーブルの使い方のまとめ

ブートストラップテーブルの使い方のまとめ

この記事では、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 &copy; 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS テーブル コンポーネント アーティファクトであるブートストラップ テーブルの詳細な説明 (基本バージョン)
  • Bootstrap Tableの使い方の詳しい説明
  • JSコンポーネントBootstrap Tableの使い方の詳しい説明
  • BootStrap テーブル プラグインの適応型固定ヘッダー (非常に使いやすい)
  • ブートストラップテーブルのいくつかの小さな操作
  • Bootstrap テーブル サーバー側ページングの例の共有
  • Bootstrap Tableの使用の概要
  • BootStrap 編集可能なテーブル
  • Bootstrap Tableは表示のためにサーバーからデータを読み込みます
  • Bootstrap テーブルのページングの問題の概要

<<:  mysql 8.0.12 winx64 のダウンロードとインストールのチュートリアル

>>:  nginxリバースプロキシのマルチポートマッピングの実装

推薦する

js 日付と時刻のフォーマット方法の例

js 日付時刻形式日付と時刻を指定された形式に変換します。例: YYYY-mm-dd HH:MM は...

JS でオブジェクトを作成する 4 つの方法

目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...

mysql 5.7.23 winx64 解凍バージョンのインストールチュートリアル

参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...

クラウドサーバーパゴダパネルの詳細なインストール手順

目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...

MYSQL大規模書き込み問題の最適化の詳細な説明

概要: MySQL のパフォーマンス最適化について話すとき、誰もがクエリ パフォーマンスを向上させる...

HTML マーキー文字フラグメントのスクロール

その特性は次のとおりです。方向アクティブな字幕のスクロール方向を設定するコードは次のとおりです。 &...

Hyper-V なしで Windows 10 を動作させるソリューション

Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...

透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

InnoDB テーブルの BLOB 列と TEXT 列のストレージ効率を最適化します。

まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...