我正在尝试调试为什么添加以下内容时分页不起作用。我得到了标题和表格格式,但是在之前和之后添加脚本时都不会发生分页。我想我已经正确设置了表名和变量,但是也许有人可以指出一些明显的错误。
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.combined.js" integrity="sha256-AQTn9CwiNvZG2zsoT0gswugjZp0alCQySLyt9brT9Cg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.js" integrity="sha256-serXvhbeEKdQIfTFSD3wpNCGNx2+/9py7VXfwLhYTfk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.widgets.js" integrity="sha256-U+0DXO4scYcNVpt7pnud6Fx3KZqK2I5mI6KOeAjSqOE="
crossorigin="anonymous"></script>
</head>
<div id="eldetail">
<script>
$(function(){
// initialize custom pager script BEFORE initializing tablesorter/tablesorter pager
// custom pager looks like this:
// 1 | 2 ??? 5 | 6 | 7 ??? 99 | 100
// _ _ _ _ adjacentSpacer
// _ _ distanceSpacer
// _____ ________ ends (2 default)
// _________ aroundCurrent (1 default)
var $table = $('data'),
$pager = $('.pager');
$.tablesorter.customPagerControls({
table : $table, // point at correct table (string or jQuery object)
pager : $pager, // pager wrapper (string or jQuery object)
pageSize : '.left a', // container for page sizes
currentPage : '.right a', // container for page selectors
ends : 2, // number of pages to show of either end
aroundCurrent : 1, // number of pages surrounding the current page
link : '<a href="#">{page}</a>', // page element; use {page} to include the page number
currentClass : 'current', // current page class name
adjacentSpacer : '<span> | </span>', // spacer for page numbers next to each other
distanceSpacer : '<span> … <span>', // spacer for page numbers away from each other (ellipsis = …)
addKeyboard : true, // use left,right,up,down,pageUp,pageDown,home, or end to change current page
pageKeyStep : 10 // page step to use for pageUp and pageDown
});
// initialize tablesorter & pager
$table
.tablesorter({
theme: 'blue',
widgets: ['zebra', 'columns', 'filter']
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $pager,
size: 10,
output: 'showing: {startRow} to {endRow} ({filteredRows})'
});
});
</script>
<table id="data"><thead>
<tr><th style="width:225px;">ID</th><th style="width:175px;">Time</th><th style="width:75px;">Level</th><th>Name</th><th>Message</th><th>Server Name</th></tr>
</thead>
<tfoot>
<tr><th style="width:225px;">ID</th><th style="width:175px;">Time</th><th style="width:75px;">Level</th><th>Name</th><th>Message</th><th>Server Name</th></tr>
<tr>
<td colspan="7">
<div class="pager">
<nav class="left">
# per page:
<a href="#" class="current">10</a> |
<a href="#">25</a> |
<a href="#">50</a> |
<a href="#">100</a>
</nav>
<nav class="right">
<span class="prev">
<img src="/icons/prev.png" /> Prev
</span>
<span class="pagecount"></span>
<span class="next">Next
<img src="/icons/next.png" />
</span>
</nav>
</div>
</td>
</tr>
</tfoot><tbody><tr class="item"><td>2002</td><td>03/19/2019 06:01:43</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>2002</td><td>03/19/2019 06:01:42</td><td>Error</td><td>Microsoft-Windows-EapHost</td><td>Skipping: Eap method DLL path validation failed. Error: typeId=254, authorId=311, vendorId=14122, vendorType=1</td><td>Server1</td></tr>
<tr class="item"><td>10016</td><td>03/19/2019 01:20:57</td><td>Error</td><td>Microsoft-Windows-DistributedCOM</td><td>The application-specific permission settings do not grant Local Activation permission for the COM Server application with CLSID
{8BC3F05E-D86B-11D0-A075-00C04FB68820}
and APPID
{8BC3F05E-D86B-11D0-A075-00C04FB68820}
to the user SID (S-1-5-21-1957994488-1532298954-725345543-8060) from address LocalHost (Using LRPC) running in the application container Microsoft.Windows.ContentDeliveryManager_10.0.17134.1_neutral_neutral_cw5n1h2txyewy SID (S-1-15-2-350187224-1905355452-1037786396-3028148496-2624191407-3283318427-1255436723). This security permission can be modified using the Component Services administrative tool.</td><td>Server1</td></tr>
<tr class="item"><td>0</td><td>03/19/2019 01:05:51</td><td></td><td>Office 2016 Licensing Service</td><td></td><td>Server1</td></tr></tbody></div></table><br>
答案 0 :(得分:1)
您必须小心,插件的版本不同。
在插件页面上,我发现: https://mottie.github.io/tablesorter/beta-testing/example-pager-custom-controls.html
<script src="https://mottie.github.io/tablesorter/docs/js/jquery-latest.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.combined.js" integrity="sha256-AQTn9CwiNvZG2zsoT0gswugjZp0alCQySLyt9brT9Cg="
crossorigin="anonymous"></script>-->
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<script src="https://mottie.github.io/tablesorter/beta-testing/pager-custom-controls.js"></script>
再加上#
var $table = $('#data')
还有科尔斯潘
colspan="6"
在主体中添加更多tr以查看效果