wikiti
commented
5 years ago Hey @mcsmithers !
By default, nested tables won't work unless you tweak the options a little. Since you only need a navigation menu to change direct child elements, you must use a custom childrenSelector; this is, > tbody > tr instead of the default value (tbody > tr).
Here's a working example for nested tables:
<!DOCTYPE html>
<html>
<head>
<title>jQuery paginate example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery-paginate.js"></script>
<style>
#table1 td {
border: solid 1px black;
}
.page-navigation a {
margin: 0 2px;
display: inline-block;
padding: 3px 5px;
color: #ffffff;
background-color: #000000;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
}
.page-navigation a[data-selected] {
background-color: #333333;
}
#table2 td {
border: solid 1px red;
}
</style>
</head>
<body>
<table id='table1'>
<thead>
<tr>
<td>Index</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>A nested table</td>
<td>
<table id='table2'>
<thead>
<tr>
<td>Index</td>
<td>Value</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
// Add some examples to the outer table
for(var i = 0; i < 36; ++i)
$('#table1 > tbody').append('<tr><td>' + i + '</td><td>' + i.toString(16) + '</td></tr>');
// Add some examples to the inner table
for(var i = 0; i < 36; ++i)
$('#table2 > tbody').append('<tr><td>' + i + '</td><td>' + i.toString(16) + '</td></tr>');
// Paginate both
$('#table1').paginate({ limit: 10, initialPage: 1, childrenSelector: '> tbody > tr' });
$('#table2').paginate({ limit: 10, initialPage: 3, childrenSelector: '> tbody > tr' });
</script>
</body>
</html>I think that the default selector should be > tbody > tr. I'll try to update the library this weekend.
Hope that helps!
Hi, thanks for making this. I have a table that has several nested tables in it and was hoping to paginate those. Would this by any chance work on those? I tried to use this and it seems like it's pretty close to working for it.