まず、実装レンダリングを見てください。悪くないと思われる場合は、実装コードを参照してください。
上記のデータは以下にページングされています
使い方
1インポートBootstrapのCSS
<link rel = "styleSheet" href = "css/v3/bootstrap.min.css">
2 jqueryをインポートします
<Script src = "js/jquery-1.10.1.min.js" type = "text/javascript"> </scrip>
3インポートテーブルページングプラグインLtable.js
<スクリプトsrc = "js/ltable.js" type = "text/javascript"> </script>
4 HTMLタグを追加し、値をIDに割り当てます
<！ - 表 - > <div id = "d"> </div> <！ - pagination-> <div id = "u"> </div>
5データを取得します
ここで、ajaxを介してJSONファイルのシミュレートデータを取得します
Inittable（データ）は、テーブルとページングを初期化する方法です
$ .ajax（{url： "json/data.json"、type： "get"、datatype： "json"、success：function（data）{inittable（data）;}、error：function（e）{alert（ "data acquisition error"）;}}）;6テーブルを初期化します
初期化方法で最初にテーブルを初期化します
var obj = data; var mytable = $。ltable（ '#d'、{data：obj.list // json data、title：["userid"、 "username"、 "password"、 "userrolename"、 "status"、 "<button onclick = 'updf（id）'> button> <button onclick = 'delf（id（id）名前：["userid"、 "username"、 "password"、 "permission name"、 "status"、 "_ opt"]、tid： "userid"、チェックボックス： "userid"}）;コードの説明
6.1初期化方法
$ .ltable（ 'id'、{data、title、name、tid、chechbox}）;
6.2属性説明
ID：ページで選択された塗りつぶしブロック
データ：ページに表示されたJSONデータ
タイトル：テーブルの各列のデータに対応するフィールド
名前：テーブルの最初の行にフィールドが表示されます
TID：各行の対応するキー値（省略できます）
チェックボックス：チェックボックスに対応する値（省略できます）
6.3チェックボックスの説明
Chechbox属性initを追加するときにアクティブ化します
チェックボックスname = "ids"
選択した列法を取得：$ .ltable.getCheckboxids（）return値の例「1,2,3,4」
6.4操作手順
属性名= _optの場合、テーブルヘッダーは自動的に位置「操作」を変更します
対応する属性タイトルは、ボタンやその他の操作を追加できます
例： "<button onclick = 'updf（id）'> modify </button>"
クリック方法はupdf（）です。パラメーターIDは、属性TIDの対応するフィールドです。
7ページネーションを初期化します
その後、ページネーション部分
$ .lpaging（ '#U'、//対応するid {pageNumber：obj.pageNumber //現在のページ番号、合計ページ：obj.totalpage //合計ページ番号、カウントサイズ：5 //表示されるページ数（省略）、count：obj.count、inputsearch：true // numpageghange（numpeghegheghang） dataurl）;コードの説明
7.1初期化方法
$ .lpaging（ 'id'、{pagenumber、totalpage、countsize、count、onpagechange（num）、inputsearch}）;
7.2属性メソッド説明
ID：ページで選択された塗りつぶしブロック
PageNumber：現在のページ番号
TotalPage：合計ページカウント
countsize：ページの表示数（デフォルト5は省略できます）
カウント：データの総数
onpagechange（num）：クリックイベントを返します
inputSearch：クエリ入力ボックスブールデフォルトを表示するかどうか
getInputval（）：入力ボックスの番号を返します
8コード全体
<！doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <title> </title> <link rel = "styleSheet" href = "css/v/boottrap.min.cs"> < id = "d"> </div> <！ - pagination-> <div id = "u"> </div> </body> <script src = "js/jquery -... min.js" type = "text/javascript"> </scrip dataurl = ""; //ページinitpage（、pagesize、 ""）; // ajaxがデータ関数を取得しますinitpage（num、ps、url）{$。ajax（{url： "json/data.json"、type： "get"、// type： "post"、// data： "userininfovo.pageid ="+num+"＆userinfovo.pagecount ="+ps、datatype： "json"、成功：function（data）{inittable（data）;}、error：function（e）{console.log（e）alert（ "data acquisition error"）;}}）;} //テーブルとページネーションデータ関数を初期化できます（データ）{// var obj = eval（ "（"+data+"）; var obj = data; // tablemytable = $。ltable（ '＃d'、{data：data：obj.list // json data、title：["userid"、 "username"、 "username"、 "userrolename"、 "status"、 "<button onclick = 'updf（id）'> button> <ボタン> <フィールド、name：["userid"、 "username"、 "password"、 "permission name"、 "status"、 "_ opt"]、tid： "userid"、チェックボックス： "userid"}）; // mytable.getCheckboxids（）; //チェックボックスで選択された値を取得します{initpage（num、pagesize、dataurl）;}}）;} // modify method function updf（id）{alert（ "modify："+id）;} // deleteメソッド関数delf（id）{alert（ "+id）;} </script> </html>wulin.comは、ブートストラップ関連のトピックを推奨しています。
ブートストラップコンポーネント操作スキル
ブートストラップ関連の知識の概要
上記は、編集者が紹介したBootstrap3フォームのプラグインとページングプラグインの例の詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！