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のウェブサイトへのご支援ありがとうございます!