Javascript 引导表ajax未加载样式
您好，我的页面中有一个引导表，我通过ajax获取了一些数据以生成一些行。但是，当从ajax解析数据时，表中没有任何样式。但是，当我将来自ajax的相同html代码粘贴到我的php文件中并将其加载到浏览器上时，它显示的非常好。这是js函数，但没有错误。我很明显遗漏了一些关于引导加载动态内容的内容Javascript 引导表ajax未加载样式,javascript,php,jquery,ajax,twitter-bootstrap,Javascript,Php,Jquery,Ajax,Twitter Bootstrap,您好，我的页面中有一个引导表，我通过ajax获取了一些数据以生成一些行。但是，当从ajax解析数据时，表中没有任何样式。但是，当我将来自ajax的相同html代码粘贴到我的php文件中并将其加载到浏览器上时，它显示的非常好。这是js函数，但没有错误。我很明显遗漏了一些关于引导加载动态内容的内容 $(document).ready(function () { new request('records', { column: 'id', order: 'DES
$(document).ready(function () {
new request('records', {
column: 'id',
order: 'DESC'
}, processReply);
});
function processReply(data) {
this.createRow = function () {
return document.createElement('tr');
}
this.createCell = function () {
return document.createElement('td');
}
this.container = document.getElementById('records-table')
for (i = 0; i < data.length; i++) {
var tr = this.createRow();
for (prop in data[i]) {
var td = this.createCell();
td.innerHTML = data[i][prop];
tr.appendChild(td);
}
container.appendChild(tr);
}
}
function request(cmd, args, callback) {
var req = $.ajax({
url: "/api/" + cmd,
type: "POST",
data: {
params: args
},
dataType: "json"
});
req.done(function (reply) {
callback(reply);
});
req.fail(function (jqXHR, textStatus) {
//alert( "Request failed: " + textStatus );
console.log(jqXHR);
});
req.always(function () {
console.log('Ajax complete!');
});
}
<div class="row">
<div class="records table-responsive">
<table id="records-table" class="table table-bordered table-condensed table-striped table-hover tablesorter">
<tr>
<td>
10
</td>
<td>
2013-12-26 10:45:27
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
4
</td>
<td>
16
</td>
<td>
2
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Varkiza
</td>
<td>
Glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
9
</td>
<td>
2013-10-06 08:32:52
</td>
<td>
KIO-6729
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
8
</td>
<td>
1
</td>
<td>
7
</td>
<td>
2
</td>
<td>
1
</td>
<td>
4
</td>
<td>
P.Falliro
</td>
<td>
Voula
</td>
<td>
2
</td>
</tr>
<tr>
<td>
6
</td>
<td>
2013-10-08 21:35:23
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
30
</td>
<td>
4
</td>
<td>
1
</td>
<td>
4
</td>
<td>
Mesogeiwn
</td>
<td>
Rafina
</td>
<td>
2
</td>
</tr>
<tr>
<td>
5
</td>
<td>
2013-10-10 15:19:45
</td>
<td>
KIO-6729
</td>
<td>
Lefteris
</td>
<td>
Xourmouzis
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
15
</td>
<td>
2
</td>
<td>
13
</td>
<td>
4
</td>
<td>
2
</td>
<td>
4
</td>
<td>
Gkazi
</td>
<td>
Ilioupoli
</td>
<td>
2
</td>
</tr>
<tr>
<td>
4
</td>
<td>
2013-10-08 14:26:47
</td>
<td>
YOE-1284
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
20
</td>
<td>
5
</td>
<td>
15
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
Peristeri
</td>
<td>
Gkizi
</td>
<td>
3
</td>
</tr>
<tr>
<td>
3
</td>
<td>
2013-10-08 07:49:22
</td>
<td>
XYZ-9870
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Alexia
</td>
<td>
Manda
</td>
<td>
20
</td>
<td>
3
</td>
<td>
17
</td>
<td>
2
</td>
<td>
3
</td>
<td>
1
</td>
<td>
Peiraias
</td>
<td>
Athina kedro
</td>
<td>
3
</td>
</tr>
<tr>
<td>
2
</td>
<td>
2013-10-02 09:47:26
</td>
<td>
EYX-3464
</td>
<td>
Giannis
</td>
<td>
Papafilis
</td>
<td>
Maria
</td>
<td>
Papadopoulou
</td>
<td>
40
</td>
<td>
5
</td>
<td>
35
</td>
<td>
2
</td>
<td>
1
</td>
<td>
2
</td>
<td>
kalamaki
</td>
<td>
glyfada
</td>
<td>
2
</td>
</tr>
<tr>
<td>
1
</td>
<td>
2013-10-16 18:26:43
</td>
<td>
EYX-3464
</td>
<td>
Tasos
</td>
<td>
Papadopoulos
</td>
<td>
Giwrgos
</td>
<td>
Thewdorou
</td>
<td>
50.9
</td>
<td>
20.9
</td>
<td>
30
</td>
<td>
1
</td>
<td>
2
</td>
<td>
2
</td>
<td>
braxami
</td>
<td>
megalo peuko
</td>
<td>
2
</td>
</tr>
</table>
</div>
</div>
更改代码并使用innerHTML而不是createElement似乎可以解决这个问题，ajax加载的表在所有引导样式下都呈现ok。但是，我不知道createELement不会出现这种情况。为什么要在那里给出一个新的关键字？这是我的php api的ajax请求的一些参数。请求记录以及对其进行排序的列，以及哪种类型的order如果只使用jQuery插入方法（因为您已经在使用jQuery），代码会更少，并且不会遇到此问题