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的數據表第一次負荷問題

回答

相關問題