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