Question

当我尝试使用JQuery数据表时，对于第一次加载，数据表css未正确加载，

但是对于后续加载，表格加载正确。

enter image description here

以下是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');

在第一次调用函数时，我的表格没有正确呈现。

有人可以帮我解决这个问题吗？

Answer 1

我怀疑html代码是由javascript生成的，你是否可以发布第一次生成的html，当它没有工作时，第二次有效，所以我们可以帮助你。

Answer 2

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

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

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

.dataTable{
    width:1920px !important;
}

希望它也可以帮到你们！：）

JQuery Datatable第一次加载问题

2 个答案: