JQuery Datatable 首次加载问题

Question

当我尝试使用 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');

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

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

Answer 1

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