Bootstrapテーブルは、Ajaxを使用してJSON形式でデータを取得する軽量のテーブルプラグインです。そのページネーションとデータ充填は非常に便利であり、国際化をサポートしています。最近、背景はこのプラグインを使用して、要約するテーブルアプリケーションを作成しました。
1。使い方
YouPaiyunが提供するCDNを介してJSプラグイン、スタイルシート、国際的なプラグインを取得するか、公式Webサイトで直接ダウンロードできます。次のJSプラグインとスタイルをHTMLヘッダーに入れて使用します。
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "styleSheet"/> <スクリプトsrc = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> //国際化、テーブルチャイニーズ<スクリプトsrc = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2.テーブルデータ充填
Bootstrapテーブルからデータを取得するには、2つの方法があります。 1つは、テーブルのデータ-URLプロパティを介してデータソースを指定することですが、次の例に示すように、JavaScriptによってテーブルを初期化するときにURLを指定することです。
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table> $（ '＃table'）。
最初の方法を引き渡す2番目の方法は、複雑なデータを処理する際の柔軟性がより柔軟になります。一般に、2番目の方法はテーブルデータの入力に使用されます。
var $ table = $（ '＃table'）; $ table.bootstraptable（{url： "duobaoActivityList"、datobaoActivityList "、" json "、pagination：true、// pagination singleSelect：false、data-us"、// table search：true：// show box coldis： " name '、field：' name '、align：' center '、valign：' middle '}、{title：' status '、align：' center '、valign：' middle '、}、{title：' contricationcounts '、align：' center '}、{title of'、 'total' center： 'total and'、 'total and：' align '、{total of'、{toter of '' center 'starttime'、align： 'center'、}、{operation '、field：' id '、align：' center '、formatter：function（value、row、index）{var e =' <a href = "＃" mce_href = "＃" onclick = "edit（/'' + row.id + '） mce_href = "＃" onclick = "del（/''+row.id+'/'）"> delete </a> ';フィールドフィールドは、データが表示される前にサーバーによって返されたフィールドに対応する必要があります。
3。ページネーションと検索
ページングのとき、ブートストラップテーブルは2つのページングフィールドをバックエンドに渡します：制限とオフセット。前者は各ページの数を表し、デフォルトは10になり、後者はページング中のデータのオフセットを表します。
検索すると、検索フィールドがバックエンドに渡され、特定の検索コンテンツが示されます。
サーバー側によって返されるデータには、ページ（ページ数）と合計（合計データ）の2つのフィールドも含まれている必要があり、フロントエンドはこれら2つのフィールドに基づいてページングする必要があります。
最終的なディスプレイ効果を以下の図に示します。
上記は、編集者が紹介したブートストラップのテーブル実装データの充填とページネーションアプリケーションの概要です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！