在應用tablesorter插件時弄亂了頭文件

我在jQuery中使用表格排序器插件在我的表格中應用了widget-scroller和widget列選擇器。在應用tablesorter插件時弄亂了頭文件

有沒有人像這樣的一張照片？看起來像我的表頭不匹配的列和搞亂。我正在使用最新版本並使用theme.blue。我在這裏錯過了什麼嗎？我GOOGLE了很多，但仍不能解決我的問題。

enter image description here

請大家幫忙。任何答案將不勝感激。

[更新] 這是我的代碼生成表：

$.ajax({ 
      type:"POST", 
      url:"../cdc/load/jsonTrack.php?", 
      data:dataString, 
      dataType: 'json', 
      success: function(data){ 
       if(data.status === "success") { 
        var elements = data.elements; 
        if(elements.length === 0) { 
         $('#cdcTracking-list tbody').append('<tr>' + 
          '<td colspan="7">No session to display</td>' + 
          '</tr>'); 
        } 
        for(var i = 0; i < elements.length; i++){ 
         var element = elements[i]; 

         //console.log('session id:' + element.vesselCode); 
         $('#cdcTracking-list tbody').append('<tr>' + 
          '<td style="color: green;">' + element.vesselCode + '</td>' + 
          '<td style="color: black;">' + element.voyage + '</td>' + 
          '<td style="color: black;">' + element.chasisNo + '</td>' + 
          '<td style="color: blue;">' + element.plateNo + '</td>' + 
          '<td style="color: blue;">' + element.bookingRef + '</td>' + 
          '<td style="color: blue;">' + element.serviceTerm +'</td>'+ 
          '</tr>'          
         ); 
        } 
       }else { 
        $('#cdcTracking-list tbody').append('<tr><td colspan="7">No session to display</td></tr>'); 
       } 
      } 
     });

HTML頭：

   <table id="cdcTracking-list" class="tablesorter-blue custom-popup" border="0" data-mode="columntoggle"> 
        <thead> 
         <tr> 
          <th align="center">Vessel </th> 
          <th align="center">Voyage </th> 
          <th align="center">Chasis No</th> 
          <th align="center">Plate</th> 
          <th align="center" >Booking Ref</th> 
          <th align="center" >Service Term</th> 
         </tr> 
        </thead> 
        <tbody> 

        </tbody> 
       </table>

，這是的tablesorter的Javascript：這裏

$("#cdcTracking-list").tablesorter({ 
        widthFixed: false, 
        showProcessing: true, 
        headerTemplate: '{content} {icon}', 
        widgets: ['zebra', 'scroller', 'columnSelector'], 
        widgetOptions: { 
         columnSelector_container: $('#columnSelector'), 
         columnSelector_columns: { 
          0: ['disable'] /* set to disabled; not allowed to unselect it */ 
         }, 
         columnSelector_saveColumns: true, 
         columnSelector_layout: '<label><input type="checkbox">{name}</label>', 
         columnSelector_name: 'data-selector-name', 
         columnSelector_mediaquery: true, 
         columnSelector_mediaqueryName: 'Auto: ', 
         columnSelector_mediaqueryState: true, 
         columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'], 
         columnSelector_priority: 'data-priority', 
         scroller_height: 300, 
         scroller_barWidth: 18, 
         scroller_upAfterSort: true, 
         scroller_jumpToHeader: true, 
         scroller_idPrefix: 's_' 
        } 
       }).tablesorterPager(pagerOptions);

來源

2014-11-16 art

我已經包括我的代碼 – art

滾動窗口小部件有很多問題，包括不能很好地與其他小部件配合使用。我希望我有時間來解決它。 – Mottie

在樣本：http://mottie.github.io/tablesorter/docs/example-widget-scroller.html它看起來像jQuery的版本是1.4.4。您可以嘗試加載該版本以查看是否有幫助。我嘗試了這個版本，並列了列，但它打破了我的其他代碼，所以我回到最新的jQuery。最終爲我工作的是擺脫固定的列寬，並使用標題中設置的百分比，如：<th style="width:10%">爲第一對列，然後其餘的似乎排隊好。

來源

2015-03-05 00:27:40

在應用tablesorter插件時弄亂了頭文件

回答

相關問題