Question

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

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>

Answer 1

恶魔在细节中。有一个语句结尾的分号，我不应该有。我原来的剧本：

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

正确的脚本：

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

jQuery表寻呼机意外令牌（Django）

1 个答案: