javascript - jQuery 表寻呼机意外令牌 (Django)

Question

试图让 jquery.tablesorter.pager.js ( http://mottie.github.io/tablesorter/docs/example-pager.html ) 使用由 for 循环填充的表。现在，尽管我设置了 { size: 5 } [要显示的行数]，但它在一页上显示所有行而不是将它们拆分。在控制台中，我看到来自 tablesorterPager 的“意外令牌”错误：

关于解决此问题的任何建议？

<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>

Answer 1

魔鬼在细节中。有一个我不应该有的以语句结尾的分号。我的原始脚本：

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

正确的脚本：

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