1.ブートストラップテーブルの導入
ブートストラップテーブルの導入に関しては、通常、2つの方法があります。
1.ソースコードを直接ダウンロードして、プロジェクトに追加します。
ブートストラップテーブルはブートストラップのコンポーネントであるため、ブートストラップに依存します。まず、Bootstrapへの参照を追加する必要があります。
2。魔法のヌゲットを使用してください
Nugetを開いて、これら2つのパッケージを検索します
ブートストラップはすでに最新の3.3.5であるため、直接インストールできます。
Bootstrapテーブルのバージョンは実際には0.4であり、詐欺が大きすぎます。したがって、ブロガーは、ブートストラップテーブルパッケージをソースコードに直接ダウンロードすることを提案しています。ブートストラップテーブルの最新バージョンは1.9.0のようです。
この記事の背景が紹介されています。
最近、顧客は需要を高め、携帯電話を通してよく表示できる元の管理システムを最適化したいと考えていました。彼は2つの解決策を考えました。
計画A：元のページを保持し、携帯電話に適した新しいページのセットを設計します。携帯電話にアクセスするときは、m.zhy.com（モバイルページ）を入力し、PCデバイスにアクセスするときはwww.zhy.com（PCページ）を入力します。
ソリューションB：ブートストラップフレームワークを使用して元のページを置き換え、携帯電話、タブレット、PCデバイスに自動的に適応します
ソリューションAを使用するには、インターフェイスのセットを設計し、ページに適したインターフェイスを書き換える必要があります。時間とコストの問題を考慮すると、プロジェクトはソリューションbを採用しています
2。エフェクトディスプレイ
2。ブートストラップテーブルの簡単な紹介
Bootstrapテーブルは、Ajaxを使用してJSON形式でデータを取得する軽量のテーブルプラグインです。そのページネーションとデータ充填は非常に便利であり、国際化をサポートしています。
3。使い方
1。JSとCSSを紹介します
<！ - css style-> <link href = "css/bootstrap/bootstrap.min.css" rel = "styleSheet"> <link href = "css/bootstrap/bootstrap-table.css" rel = "styleSheet"> <！ - js-> <script src = "js/bootstrap/jquery-1.12.0.min.js" type = "text/javascript"> </script> <scrip> <src = "js/bootstrap/bootstrap.min.js"> </script> <script src = "js/boottrap/bootstrap table.js"> src = "js/bootstrap/bootstrap-table.js"> </scrip> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script>
2。テーブルデータ充填
Bootstrapテーブルからデータを取得するには、2つの方法があります。 1つは、テーブルのデータ-URLプロパティを介してデータソースを指定することであり、もう1つはJavaScriptを介してテーブルを初期化するときにURLを指定してデータを取得することです。
<table data-toggle = "table"> <tead> ... </tead> </table> ...
$（ '＃table'）。bootstraptable（{url： 'data.json'}）;2番目の方法は、複雑なデータを処理する場合、最初の方法よりも柔軟です。一般に、2番目の方法はテーブルデータの入力に使用されます。
$（function（）{//1。初期化テーブルvar otable = new TableInit（）; otable.init（）; // 2。初期化ボタンのクリックイベント/ * var obuttoninit = new buttuninit（）; obuttoninit.init（）; */}）; var tableinit = function（）{var otableinit = new object（）; // table otableinit.init = function（）{$（ '＃tradelist'）。bootstraptable（{url： '/vendermanager/tradelist'、// request url（*）メソッド： 'post'、// request method（*）toolbar： '＃toolbar'、// spriped spriped by sfore buttonキャッシュを使用するには、デフォルトがTRUEであるため、一般に、このプロパティ（*）ページネーション：true、//ページングを表示する場所（*）ソートを表示する必要があります。 PageNumber：1、//最初のページを初期化してロードする、デフォルトの最初のページページサイズ：50、//ページごとに記録された行数（*）PageList：[10、25、50、100]、//選択するページあたりの行数（*）StrictSearch：true、Clicktoselect：true、sected row height：460はsetted aver seet as field efs es field height、 /seet、テーブルの高さレコード数に応じたテーブルの高さ、uniqueId： "id"、//各行の一意の識別は一般にプライマリキー列cardview：false：false：false：false：false、//親と子のテーブル列： }、{field： 'receivetime'、title： 'transaction time'}、{field： 'field'、title： 'lument'}、{field： 'coin_credit'、title： 'input coin'}、{field： 'bill_credit'、title： 'input banknote'}、{field： 'field'、 'change'} type '}、{field：' goodmachineid '、title：' freighter number '}、{field：' internidname '、title：' cargo lane number '}、{field：' goodsname '、' title： 'product name'}、{field： 'changestatus'、title： 'paine'}、{field： 'sendtatus'、 " }; //クエリパラメーターを取得otableInit.queryparams = function（params）{var temp = {//ここのキー名とコントローラーの変数名は常に必要です。これが変更された場合、コントローラーも同じ制限に変更する必要があります：params.limit、//ページサイズオフセット：//ページ番号sdate：$（ "＃strattime"）。val（）、edit：$（ "＃endtime"）。val（）、sellerid：$（ "＃sellerid"）。 $（ "＃cardnumber"）。val（）、maxrows：params.limit、pageindex：params.pagenumber、portid：$（ "＃portid"）。val（）、cardnumber：$（ "＃cardnumber"）。成功：$（ 'input：radio [name = "success"]：checked'）。val（）、}; return temp; }; OtableInitを返します。 };フィールドフィールドは、データが表示される前にサーバーによって返されたフィールドに対応する必要があります。
3.バックグラウンドでデータを取得します
a。サーブレットはデータを取得します
BufferedReader bufr = new BufferedReader（new inputStreamReader（request.getInputStream（）、 "utf-8"））; stringbuilder sbuilder = new StringBuilder（ ""）; string temp = ""; while（（temp = bufr.readline（））！= null）{sbuilder.append（temp）; } bufr.close（）; string json = sbuilder.toString（）; jsonobject json1 = jsonobject.fromobject（json）; string sdate = json1.getString（ "sdate"）; //この方法でフロントエンドデータを取得します...b。 SpringMVCコントローラーの対応する方法は、データを取得します
public jsonresult getDepartment（int lime、int offset、string orderid、string sellerid、portid、cardnumber、success、maxrows、tradetype）{...}4。ページネーション（最も問題に遭遇するもの）
ページネーションを使用して、サーバー側によって返されるデータには行が含まれている必要があり、合計は次のとおりです。
... <br> gblst = sqlado.getTradeList（SQL、pageIndex、maxrows）; jsonarray jsondata = new jsonarray（）; jsonobject jo = null; for（int i = 0、len = gblst.size（）; i <len; i ++）{tradebean tb = gblst.get（i）; if（tb == null）{続行; } jo = new jsonobject（）; Jo.put（ "id"、i+1）; Jo.put（ "liushuiid"、tb.getliushuiid（））; jo.put（ "price"、string.format（ "％1.2f"、tb.getprice（）/100.0））; jo.put（ "mobilephone"、tb.getmobilephone（））; jo.put（ "Receivetime"、toolbox.getymdhms（tb.getreceivetime（）））; jo.put（ "tradetype"、clsconst.trade_type_des [tb.gettradetype（）]）; jo.put（ "changestatus"、（tb.getchangestatus（）！= 0）？ "success"： "failed"）; jo.put（ "changestatus"、（tb.getchangestatus（）！= 0）？ "success"： "failed"）; jo.put（ "sendstatus"、（tb.getsendstatus（）！= 0）？ "success"： "failed"）; jo.put（ "bill_credit"、string.format（ "％1.2f"、tb.getbill_credit（）/100.0））; jo.put（ "changes"、string.format（ "％1.2f"、tb.getChanges（）/100.0））; jo.put（ "goodroadid"、tb.getGoodRoadId（））; jo.put（ "smscontent"、tb.getsmscontent（））; jo.put（ "orderid"、tb.getorderid（））; jo.put（ "goodsname"、tb.getgoodsname（））; jo.put（ "inneridname"、tb.getinneridname（））; jo.put（ "xmlstr"、tb.getxmlstr（））; jsondata.add（jo）; } int totalcount = sqlado.getTraderowsCount（SQL）; jsonobject jsonobject = new jsonobject（）; jsonobject.put（ "rows"、jsondata）; // jsonarray jsonobject.put（ "total"、totalcount）; // total records out.print（jsonobject.tostring（））; <br> ...5。ページネーションインターフェイスの内容の紹介
フロントエンドはページデータを取得します。コードは次のとおりです。
... <br> otableInit.queryparams = function（params）{var temp = {//ここのキー名とコントローラー変数名は常に必要です。これが変更された場合、コントローラーも同じ制限に変更する必要があります：params.limit、//オフセット：params.offset、//ページに記録されるレコードの数：$（ "＃strattime"）。val（）、}; return temp; }; <br> ...バックエンドはページデータを取得し、コードは次のとおりです。
... <br> int pageindex = 0; int offset = toolbox.filterint（json1.getString（ "offset"））; int limit = toolbox.filterint（json1.getString（ "lime"））; if（offset！= 0）{pageindex = offset/limit;} pageindex+= 1; //ページ数<br> ...4。その他
Bootstrap3はIE8ブラウザと互換性があります！記事：//www.vevb.com/article/83366.htmをご覧ください
十分に学んだことがない場合は、ここをクリックして学習してから素晴らしいトピックを添付してください：Bootstrap Learningチュートリアル
上記はこの記事に関するすべてです。 JSテーブルコンポーネントアーティファクトブートストラップテーブルをよりよく学ぶのに役立つことを願っています。