2015-06-14 78 views
1

我的代碼除了主題說明以外所有的作品都可以用作tablesorter。我已經把這些主題放在了tablesorter js的CSS文件夾中。如果你能幫助我,我感謝你的幫助。這裏是我的代碼:tablesorter主題不起作用

<table id="dtTable" class="table table-bordered table-responsive"> 
    <thead> 
     <tr> 
      <th align="center">#</th> 
      <th>Desc</th> 
      <th colspan="2" align="center">Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php $query="SELECT * FROM eth" ; $records_per_page=10; $newquery=$ eth->paging($query,$records_per_page); $eth->dataview($newquery); ?> 
     <tbody class "do-not-sort tablesorter-no-sort"> 
      <tr> 
       <td colspan="7" align="center"> 
        <div class="pagination-wrap"> 
         <?php $eth->paginglink($query,$records_per_page); ?></div> 
       </td> 
      </tr> 
     </tbody> 
    </tbody> 
</table> 
<script type="text/javascript"> 
    $(function() { 

     $("#dtTable").tablesorter() 
     selectorSort: "th, td" 
     selectorRemove: "tr.do-not-sort" 
     theme: "jui" 
    }); 
</script> 

謝謝

回答

1

當使用引導或jQuery UI的風格,你需要「uitheme」小工具來管理類名(demo)。

頁眉

<!-- ui theme stylesheet - contents shown below --> 
<link rel="stylesheet" href="../css/theme.jui.css"> 
<!-- jQuery UI theme (cupertino example here) --> 
<link rel="stylesheet" href="css/jquery-ui.min.css"> 

<!-- tablesorter plugin --> 
<script src="../js/jquery.tablesorter.js"></script> 
<!-- tablesorter widget file - loaded after the plugin --> 
<script src="../js/jquery.tablesorter.widgets.js"></script> 

腳本

$(function() { 
    $('table').tablesorter({ 
     theme: 'jui', 
     headerTemplate: '{content}{icon}', 
     widgets: ['zebra', 'uitheme'] 
    }); 
}); 

的「uitheme」插件包含在jquery.tablesorter.widgets.js文件並且需要被包括在與在headerTemplate一個{icon}圖案沿着widgets選項。