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