bootstrap tableスタイルが失われました

8771 ワード

質問の説明:bootstrapのtableを使用してページレイアウトを行い、ajaxでデータソースを要求し、テーブルの内容を動的に追加します.追加するときは、自分で文字列をつづり、表に追加します.その結果bootstrapのテーブルスタイルは有効ではないことが分かった.
ページコード:

JSコード:
$.ajax({
        type: "GET",
        url: "../../getBillingRecords.do",
        // contentType: "application/json; charset=utf-8",
        dataType: "json",
        async:false,
        data:{
            currentPage:options.currentPage,
            pageSize:options.numberOfPages
        },
        success: function (data) {
            if (data == ""){
                swal({
                    title: "    ",
                    text: "3      ",
                    timer: 3000,
                    type:"info",
                    showConfirmButton: true
                });
            }else{
                var html = "";
                for (var i = 0; i < data.length;i++){
                    html += "" +
                        ""+data[i].categoryName+"" +
                        ""+data[i].describes+"" +
                        ""+data[i].amount+"" +
                        ""+data[i].createTime+"" +
                        "" ;
                }
                // $("#content").empty();
                $("#content").append(html);
            }
        },
        error: function () {
            swal({
                title: "     ,      ",
                text: "5      ",
                timer: 5000,
                type:"error",
                showConfirmButton: true
            });
        }
    });

以上のように、具体的なコードで、内容のつなぎ合わせも正常で、ページは正常にデータを表示することができますが、スタイルは失われています.
筆者の研究により,このような動的添加方式に問題があることが分かった.
ラベル内の動的appendコードを直接使用することはできません.自分でコードをスペルしたい場合は、中にコードを追加する必要があります.そうすれば、スタイルが正常に表示されます.
修正後のコード:
消費カテゴリ
説明
消費数量
消費時間
もちろん、htmlコードを自分で手動でつなぐ以外にbootstrap-tableを参照することもできます.jsは自動的にコンテンツを追加します.便利で間違いもない.
詳細については、「セルのデータを複数の方法で埋め込む」を参照してください.
みんなに役に立つことを望んで、ありがとうございます!








アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他