まず、実装レンダリングを見てください。悪くないと思われる場合は、実装コードを参照してください。
上記のデータは以下にページングされています
使い方
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のウェブサイトへのご支援ありがとうございます!