JQuery的数据表第一次负荷问题

当我试图使用jQuery的数据表，在第一个载荷，数据表CSS是不正确加载，JQuery的数据表第一次负荷问题

但随后的负载，表正确加载。

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');

在函数的第一次调用中，表格没有正确渲染。

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

来源

2013-04-22 TechyHarry

你能告诉我们你的JavaScript吗？ – 2013-04-22 10:47:30

@DerekHenderson我已经添加了javascript代码 – TechyHarry 2013-04-22 11:05:22

@DerekHenderson您可以帮忙吗？ – TechyHarry 2013-04-22 11:31:06

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

来源

2013-04-22 12:03:54

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

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

因此，简单的办法就是在您的CSS以下：

.dataTable{ 
    width:1920px !important; 
}

希望它可以帮助你们呢！ :)

来源

2016-02-23 07:32:37

JQuery的数据表第一次负荷问题

回答

相关问题