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

我怀疑是由 javascript 生成的 html 代码的问题，您能否发布第一次生成的 html 时它不起作用，第二次生成时它起作用，以便我们为您提供帮助。

于 2013-04-22T12:03:54.477 回答
0

我遇到了类似的问题，我发现的解决方案是通过使用 css 调整宽度来覆盖默认行为。

很明显，在第一次加载时，数据表的宽度是1320px（在我的情况下），而对于随后的加载，它是1920px预期的宽度。

因此，简单的解决方案是在您的 css 中包含以下内容：

.dataTable{
    width:1920px !important;
}

希望对大家也有帮助！:)

于 2016-02-23T07:32:37.893 回答