ブートストラップテーブルはデータテーブルを簡単に実装します-ブートストラップのチュートリアル-php.cn

添加记录

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

ブートストラップテーブルはデータテーブルを簡単に実装します

angryTom

Aug 20, 2019 pm 03:47 PM

ブートストラップテーブルはデータテーブルを簡単に実装します

ブートストラップテーブルを使用する場合、データを表示するためにテーブルを使用することがよくありますが、自分で作成する場合は確かに問題ありませんが、データを表示するのは非常に面倒です。ただし、ブートストラップテーブルのカプセル化にはデータテーブルコンポーネントの完全なセットがあり、バックグラウンドから要求されたデータを簡単に表示できます。ブートストラップテーブルを実装するには 2 つの方法があります。1 つはテーブルを通じて HTML に記述する方法で、もう 1 つはjs で実装する js 実装は比較的柔軟なので、ここでは js メソッドを使用します。

ブートストラップテーブルはデータテーブルを簡単に実装します

# 推奨チュートリアル:

#Bootstrap グラフィックチュートリアル#顧客最後

最初に対応する css、js、その他のファイルを導入する必要があります

 <!DOCTYPE html>
  <html>
  <head>
<meta charset="UTF-8">
<title>Bootstrap-Table</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/bootstrap-table.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div>
    <div>
        <div class="col-*-12">

            <div id="toolbar">
                <div class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加记录</div>
            </div>

            <table id="mytab" class="table table-hover"></table>

            <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
               <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 id="添加记录">添加记录</h4>
                        </div>
                        <div class="modal-body">
                            <form role="form" action="javascript:void(0)">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="addRecord">提交</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table.js"></script>
<script src="assets/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
    $(function() {
        //根据窗口调整表格高度
        $(window).resize(function() {
            $(&#39;#mytab&#39;).bootstrapTable(&#39;resetView&#39;, {
                height: tableHeight()
            })
        })

        $(&#39;#mytab&#39;).bootstrapTable({
            url: "",//数据源
            dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
            height: tableHeight(),//高度调整
            search: true,//是否搜索
            pagination: true,//是否分页
            pageSize: 20,//单页记录数
            pageList: [5, 10, 20, 50],//分页步进值
            sidePagination: "server",//服务端分页
            contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
            dataType: "json",//期待返回数据类型
            method: "post",//请求方式
            searchAlign: "left",//查询框对齐方式
            queryParamsType: "limit",//查询参数组织方式
            queryParams: function getParams(params) {
                //params obj
                params.other = "otherInfo";
                return params;
            },
            searchOnEnterKey: false,//回车搜索
            showRefresh: true,//刷新按钮
            showColumns: true,//列选择按钮
            buttonsAlign: "left",//按钮对齐方式
            toolbar: "#toolbar",//指定工具栏
            toolbarAlign: "right",//工具栏对齐方式
            columns: [
                {
                    title: "全选",
                    field: "select",
                    checkbox: true,
                    width: 20,//宽度
                    align: "center",//水平
                    valign: "middle"//垂直
                },
                {
                    title: "ID",//标题
                    field: "id",//键名
                    sortable: true,//是否可排序
                    order: "desc"//默认排序方式
                },
                {
                    field: "name",
                    title: "NAME",
                    sortable: true,
                    titleTooltip: "this is name"
                },
                {
                    field: "age",
                    title: "AGE",
                    sortable: true,
                },
                {
                    field: "info",
                    title: "INFO[using-formatter]",
                    formatter: &#39;infoFormatter&#39;,//对本列数据做格式化
                }
            ],
            onClickRow: function(row, $element) {
                //$element是当前tr的jquery对象
                $element.css("background-color", "green");
            },//单击row事件
            locale: "zh-CN", //中文支持
            detailView: false, //是否显示详情折叠
            detailFormatter: function(index, row, element) {
                var html = &#39;&#39;;
                $.each(row, function(key, val){
                    html += "<p>" + key + ":" + val +  "</p>"
                });
                return html;
            }
        });

        $("#addRecord").click(function(){
            alert("name:" + $("#name").val() + " age:" +$("#age").val());
        });
    })

    function tableHeight() {
        return $(window).height() - 50;
    }
    /**
     * 列的格式化函数 在数据从服务端返回装载前进行处理
     * @param  {[type]} value [description]
     * @param  {[type]} row   [description]
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    function infoFormatter(value, row, index)
    {
        return "id:" + row.id + " name:" + row.name + " age:" + row.age;
    }
</script>
</body>
</html>

ログイン後にコピー

サーバー側:

リクエストを受信したときに json 配列を返すだけです (はい、json 配列)単一のオブジェクトではない場合、データは表示されません。

ブートストラップテーブルはフロントエンドまたはバックエンドでページネーションできることに注意してください。ここではバックエンドページングを使用しています。バックエンドページングを行う場合、

total を含むキー値:レコードの総数は修正されているようですが、他の

行に変更できるドキュメントには見つかりませんでした: レコードコレクションキーの値は変更できます。DataField は必要に応じて定義できます

{
"total":200,
"rows":[
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26},
{"id":1, "name":"sallency", "age": 26}]
}

ログイン後にコピー

でも要望はあるかもしれませんデータが割り当てられないと不安になりますが、以下の方法でもデータを描画することができます。この効果は上記のものとは異なるため、ここでは示しません。同じ最初のステップは、公式 Web サイトに必要な css/js およびその他のファイルを導入することです。

var $table = $("#product");
    $table.bootstrapTable({
        url: "http://192.168.6.240:8080/form", 
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",

        // toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
         striped: true,                      //是否显示行间隔色
         cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
         pagination: true,                   //是否显示分页（*）
         sortable: false,                     //是否启用排序
         sortOrder: "desc",                   //排序方式
      
         sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
         pageNumber:1,                       //初始化加载第一页，默认第一页
         pageSize: 10,                       //每页的记录行数（*）
         pageList:[5,10,20,30],//分页步进值       //可供选择的每页的行数（*）
        // search:true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        // strictSearch: true,
         oolbarAlign:&#39;right&#39;,//工具栏对齐方式
         buttonsAlign:&#39;right&#39;,//按钮对齐方式
        // showColumns: true,                  //是否显示所有的列
        // showRefresh: true,                  //是否显示刷新按钮
         minimumCountColumns: 2,             //最少允许的列数
         clickToSelect: true,                //是否启用点击选中行
         //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
         uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        // showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
         cardView: false,                    //是否显示详细视图
        // detailView: false,                   //是否显示父子表onEditableSave
        // singleSelect: false,
        // striped: true, //是否显示行间隔色
        // cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        // sortable: true, //是否启用排序 
        // pagination: true,   //显示分页按钮
        // sortName:"starttime",
        // sortOrder:"desc", //默认排序
        // pageNumber: 1, //初始化加载第一页，默认第一页
        // pageSize: 10,   //默认显示的每页个数
        // showRefresh: true,                  //是否显示刷新按钮
        // showPaginationSwitch: true,       //是否显示选择分页数按钮
        // queryParamsType: &#39;&#39;, //默认值为 &#39;limit&#39; ,在默认情况下 传给服务端的参数为：offset,limit,sort // 设置为 &#39;&#39; 在这种情况下传给服务器的参数为：pageSize,pageNumber
         queryParams:function(params){
             var temp = {     
                pageSize: params.pageSize,   //页面大小
                pageNumber: params.pageNumber,  //页码
                 table_data:tempdata,
               
            }
            return temp;
        },
        responseHandler:function(res){
            //动态渲染表格之前获取有后台传递的数据时,用于获取出除去本身渲染所需的数据的额外参数
            //详见此函数参数的api
            return res;
        },
       // search: true, //显示搜索框（客户端搜索）
       //sidePagination: "server", //服务端处理分页
       // showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
       // detailView: false,                   //是否显示父子表
        columns: [{
            title : &#39;备注&#39;,
            field : &#39;code&#39;,
            align : &#39;center&#39;,
            width :  100,
            valign : &#39;middle&#39;,
           
        },{
            title : &#39;操作&#39;,
            field : &#39;name&#39;,
            align : &#39;center&#39;,
            width :  120 ,
            valign : &#39;middle&#39;,
           
        },
        {
            title : &#39;编码&#39;,
            field : &#39;calcMode&#39;,
            align : &#39;center&#39;,
            width :  120 ,
            valign : &#39;middle&#39;,
           
        }],
      
        onLoadSuccess: function(){  //加载成功时执行  
            alert("加载数据成功");  
        },  
        onLoadError: function(){  //加载失败时执行  
            alert("加载数据失败");  
        }        
    });

};

ログイン後にコピー

使い方がわかったら、自分で書いたテーブルよりもずっと使いやすいと思いませんか? 大量の js や div などを記述する必要はありません。使い方は公式サイトで確認できます。

以上がブートストラップテーブルはデータテーブルを簡単に実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

ブートストラップ画像の中央でFlexBoxを使用する必要がありますか？ Apr 07, 2025 am 09:06 AM

ブートストラップの写真を集中させる方法はたくさんあり、FlexBoxを使用する必要はありません。水平にのみ中心にする必要がある場合、テキスト中心のクラスで十分です。垂直または複数の要素を中央に配置する必要がある場合、FlexBoxまたはグリッドがより適しています。 FlexBoxは互換性が低く、複雑さを高める可能性がありますが、グリッドはより強力で、学習コストが高くなります。メソッドを選択するときは、長所と短所を比較検討し、ニーズと好みに応じて最も適切な方法を選択する必要があります。

ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップアクセシビリティ：包括的でユーザーフレンドリーなWebサイトの構築 Apr 07, 2025 am 12:04 AM

Bootstrapを使用して包括的でユーザーフレンドリーなWebサイトを構築することは、次の手順を通じて実現できます。1。ARIAタグでスクリーンリーダーのサポートを強化します。 2。WCAG標準に準拠するように色のコントラストを調整します。 3.キーボードナビゲーションがフレンドリーであることを確認してください。これらの措置により、Webサイトが障壁を持つユーザーを含むすべてのユーザーがフレンドリーでアクセスできるようになります。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

See all articles

ブートストラップテーブルはデータテーブルを簡単に実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック