Пагинация в HTML и Javascript
Я пытаюсь отладить, почему разбиение на страницы не работает, когда я добавил следующее. Я получаю заголовки и формат таблицы, но разбиение на страницы не происходит, когда я добавляю скрипт до и после. Я думаю, что правильно установил имя таблицы и переменные, но, возможно, кто-то может указать на что-то очевидное, что это не так.
<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>
Да, в <head> <script type='text/javascript' src = "code.jquery.com/jquery-3.3.1.js"></скрипт> <script type='text/javascript' src = "cdn.datatables.net/1.10.19/js/…> <LINK href = "cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel = "stylesheet" type= "text/css"> Нет ошибок в консоли
TableSorter кажется собственной библиотекой/плагином, отдельным от DataTables. Нет?
ты прав. Я пытался выяснить оба, чтобы увидеть, что может работать, но, думаю, я нажал «Сохранить» над библиотеками сортировщика таблиц. позвольте мне попробовать это сейчас.
Обновил библиотеки, но все равно без радости.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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"
В tbody добавьте больше tr, чтобы увидеть эффект
Согласованный. Вот рабочая демонстрация. Совет: я нашел решения, основанные на ошибках, выдаваемых в консоли браузера, поэтому следите за этими ошибками.
Благодарю. Я все еще работаю над этим, и я попробую это на реальной странице, там около 1300 строк, поэтому я не хотел вставлять все это :)
Да, поэтому я не уверен, что правильно понимаю, и я думаю, что проблема может заключаться в том, что я показываю только 1 часть. Я использовал функцию sortTable(n) в течение очень долгого времени, но из-за огромного количества строк она приводила к сбою браузера каждый раз, когда я использовал ее в средстве просмотра журнала событий, поэтому мне нужно выполнить разбиение на страницы. надеясь преобразовать все таблицы в какой-то момент, но большая из них — это средство просмотра событий. Вот моя корзина для пасты со всеми деталями. pastebin.com/KThjJszG
Похоже, сейчас я получаю сообщение об ошибке, но только одно из Uncaught TypeError: Невозможно прочитать свойство customPagerControls неопределенного в HTMLDocument.<anonymous> (POST2019Mar19.html:2282) в j (jquery.min.js:2) в Object.fireWith [as resolveWith] (jquery.min.js:2) в Function.ready (jquery.min.js:2) в HTMLDocument.I (jquery.min.js:2)
Похоже, вы загружаете jQuery дважды, один раз вверху и еще раз ниже, где вы включаете пользовательский интерфейс jQuery. Это может вызвать проблемы. Кроме того, он по-прежнему говорит colspan = "7" вместо colspan = "6".
Вы включили библиотеки jQuery и TableSorter? Вы получаете какие-либо ошибки в консоли вашего браузера?