3

JQuery データテーブルを使用しようとすると、最初のロードでデータテーブル css が正しくロードされません。

ただし、後続のロードでは、テーブルは適切にロードされます。

ここに画像の説明を入力

以下はhtmlです

HTML:

<table id="test">
<thead id="testhead">
<tr> 
<th>Created Date </th>
<th>Source Name </th>
<th>Description </th>
</thead>
<tbody id="testbody"></tbody>
</table>

Javascript

Javascript では、作成して動的に $("testhead") と $("testbody") にそれぞれ追加しようとしています。

                  dwr.util.removeAllRows("testhead");
                  dwr.util.removeAllRows("testbody");
                  var table_header = $("#testhead");
                  var header_row = $("<tr></tr>");

                  /**
                   *
                   * Populate table header
                   */
                  var cell = $("<th></th>");
                  cell.text("Created Date");
                  header_row.append(cell);

                  cell = $("<th></th>");
                  cell.text("Source Name");
                  header_row.append(cell);
                  table_header.append(header_row);

                  cell = $("<th></th>");
                  cell.text("Description");
                  header_row.append(cell);
                  table_header.append(header_row);

                  var table_body = $("#testbody");
                  for ( var i = 0; i < data.length; i++) {
                          var row = $("<tr></tr>");

                          var cell = $("<td></td>");
                          cell.text(data[i].createdDate.getDay() + "-" +
                          data[i].createdDate.getMonth() + "-" +
                          data[i].createdDate.getFullYear());
                          row.append(cell);

                          cell = $("<td></td>");
                          cell.text(data[i].sourceName);
                          row.append(cell);

                          cell = $("<td></td>");
                          cell.text(data[i].description);
                          row.append(cell);
                 }

              $('#test').dataTable({
                       "bJQueryUI":true,
                   "aLengthMenu": [[10,25,50,100,-1], [10,25,50,100,"All"]],
               "iDisplayLength" : 10,
               "bPaginate" :true,
               "bAutoWidth":true,
               "bRetrieve":true,
                              "aoColumns":[
                          {"sTitle":"Created Date","bSearchable" : true,"bSortable" :true},
                              {"sTitle":"Source Name","bSearchable" : true,"bSortable" :true},
                              {"sTitle":"Description","bSearchable" : true,"bSortable" :true},
               ],
               "sDom":'<"H"lfr>t<"F"ip><"clear">',
               "sPaginationType":"full_numbers",
               "sPageButton":"paginate_button",
               "sPageButtonStaticDisbaled":"paginate_button"
               })

              $("#test").css("width","100%");
              $("#test").dataTable().fnDraw();

              showDiv('results');

関数の最初の呼び出しで、テーブルが正しくレンダリングされません。

この問題に関して誰かが私を助けてくれますか?

4

2 に答える 2

0

同様の問題に直面しましたが、私が見つけた解決策は、css を使用して幅を調整してデフォルトの動作をオーバーライドすることです。

最初のロードではデータテーブルの幅が1320px（私の場合）であり、その後のロードでは1920px予想される幅であることは明らかです。

したがって、簡単な解決策は、css に以下を含めることです。

.dataTable{
    width:1920px !important;
}

それがあなたたちにも役立つことを願っています！:)

于 2016-02-23T07:32:37.893 に答える
0

JavaScript によって生成された HTML コードに問題があると思われます。最初に生成された HTML が機能しなかったときと、2 回目に生成された HTML を投稿していただければ、私たちがお手伝いできます。

于 2013-04-22T12:03:54.477 に答える