2013-08-01 48 views
0

試圖讓jquery.tablesorter.pager.js(http://mottie.github.io/tablesorter/docs/example-pager.html)處理由for循環填充的表。現在,儘管我設置了{size:5} [要顯示的行數],它將在一個頁面上顯示所有行並且不會將它們分開。在控制檯我從tablesorterPager看到一個「意外的標記」錯誤:jQuery表尋呼機意外令牌(Django)

enter image description here

上解決此有何建議?

<table class="table table-bordered table-hover tablesorter"> 
<thead> 
    <tr> 
     <th> Header 1</th> 
     <th> Header 2</th> 
     <th> Header 3</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <th colspan="3" class="pager form-horizontal"> 
     <button type="button" class="btn first"><i class="icon-step-backward"></i></button> 
     <button type="button" class="btn prev"><i class="icon-arrow-left"></i></button> 
     <span class="pagedisplay"></span> 
     <button type="button" class="btn next"><i class="icon-arrow-right"></i></button> 
     <button type="button" class="btn last"><i class="icon-step-forward"></i></button> 
    <select class="pagenum input-mini" title="Select page number"></select> 
     </th> 
    </tr> 
</tfoot> 
<tbody> 
{% for object in settings %} 
    <tr> 
      <td> {{ stuff }} </td> 
      <td> {{ stuff.morestuff }} </td> 
      <td> {{ stuff.evenmorestuff }} </td> 
     </tr> 
{% endfor %} 
</tbody> 
</table> 

然後在模板的底部:從基本模板

<script src="{% static 'js/jquery.tablesorter.js' %}"></script> 
<script src="{% static 'js/jquery.tablesorter.widgets.js' %}"></script> 
<script src="{% static 'js/jquery.tablesorter.pager.js' %}"></script> 

<script id="js"> 
$(function(){ 
    $.extend($.tablesorter.themes.bootstrap, { 
    table  : '', 
    header  : '', 
    footerRow : '', 
    footerCells: '', 
    icons  : '', 
    sortNone : 'bootstrap-icon-unsorted', 
    sortAsc : 'icon-chevron-up', 
    sortDesc : 'icon-chevron-down', 
    active  : '', // applied when column is sorted 
    hover  : '', // use custom css here - bootstrap class may not override it 
    filterRow : '', // filter row class 
    even  : '', 
    odd  : '' 
    }); 

$("table").tablesorter({ 
widthFixed: true, 
headerTemplate : '{content} {icon}'  
}); 

.tablesorterPager({ 
      container: $(".pager"), 
      cssGoto : ".pagenum", 
      size: 5, 
      // set to false to add/remove rows with pager enabled. 
      removeRows: false, 
      // output string - default is '{page}/{totalPages}'; 
      // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows} 
      output: '{startRow} - {endRow}/{filteredRows} ({totalRows})' 

     }); 
}); 
</script> 

加載jQuery的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 

回答

0

惡魔是在細節。有一個聲明結束分號,我不應該有。我原來的劇本:

$("table").tablesorter({ 
    widthFixed: true, 
    headerTemplate : '{content} {icon}'  
}); 
.tablesorterPager({ 

正確的腳本:

$("table").tablesorter({ 
    widthFixed: true, 
    headerTemplate : '{content} {icon}'  
}) 
.tablesorterPager({