bootstrap表ajax没有加载样式

时间:2013-10-27 11:13:06

标签: javascript php jquery ajax twitter-bootstrap

您好我的页面中有一个引导表,我通过ajax获取一些数据来制作一些行。但是,当从ajax解析数据时,表没有任何样式。但是当我从ajax粘贴相同的html代码时,在我的php文件中并将其加载到浏览器上它显示就好了。这是js函数,但它没有错误。我显然缺少一些关于bootstrap加载动态内容的东西?

$(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!');
    });
}

这是ajax完成后的完整html:

<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加载表可以使用所有引导样式呈现。但是我不知道createSeement会发生这种情况。

0 个答案:

没有答案