表的每10行我想分别显示它们

Question

在我的Django项目中，我有一个表，其中数据来自数据库。可以有数百行。我无法在一页中显示所有内容。我想显示我的表，每个表10行。我有两个按钮为下一行和前一行。我可以用jquery或一些python代码做到这一点吗?

index . html

<table class="table" border=1>
<thead>
<tr>
<th>Full Name</th>
<th>Company</th>
<th>Email</th>
<th>Phone Number</th>
<th>Note</th>
<th>ID</th>
<th>Item Barcode</th>
</tr>
</thead>

<tbody>
{% for x in thelist %}
<tr>
<td>{{x.full_name}}</td>
<td>{{x.company}}</td>
<td>{{x.email}}</td>
<td>{{x.phone_number}}</td>
<td>{{x.note}}</td>
<td>{{x.id}}</td>
<td>{{x.item_barcode}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<button type="button" class="btn btn-primary" name="button">Next</button>
<button type="button" class="btn btn-primary" name="button">Previous</button>

Answer 1

您可以使用bootstart数据表:

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<table class="table" border=1 id='mydatatable'>
<thead>
<tr>
<th>Full Name</th>
<th>Company</th>
<th>Email</th>
<th>Phone Number</th>
<th>Note</th>
<th>ID</th>
<th>Item Barcode</th>
</tr>
</thead>

<tbody>
{% for x in thelist %}
<tr>
<td>{{x.full_name}}</td>
<td>{{x.company}}</td>
<td>{{x.email}}</td>
<td>{{x.phone_number}}</td>
<td>{{x.note}}</td>
<td>{{x.id}}</td>
<td>{{x.item_barcode}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script src='https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function () {
$('#mydatatable').DataTable();
});
</script>

更多信息请参考https://datatables.net/

Answer 2

您可以使用rowIndex和两个类(例如.active和.visible)作为第一个可见行，并通过CSS进行样式化:

---

如果没有.active类，添加到第一行:

if (!document.querySelector('.active')) {
table_rows[0].classList.add('active');
}

在下一步(最好是在单独的函数中，例如showRows())中，从所有行中删除类.visible，然后将其添加到像您使用常量visible_rows定义的许多行中，从活动行开始:

function showRows() {
let active_row = document.querySelector('.active');

for (i = 0; i < table_rows.length; i++) {
table_rows[i].classList.remove('visible');
}

for (i = 0; i < visible_rows; i++) {
active_row.classList.add('visible');

if (active_row.nextElementSibling) {
active_row = active_row.nextElementSibling;
}
}
}

在#next和#previous的事件处理程序中，如果在该方向上有行，则只需按可见行数移动.active类，并调用函数showRows():

document.querySelector('#next').addEventListener('click', function() {
const active_row = document.querySelector('.active');
const active_index = active_row.rowIndex;

if (table_rows.length > active_index + visible_rows - 1) {
active_row.classList.remove('active');
table_rows[active_index + visible_rows - 1].classList.add('active');
showRows();
}
});
document.querySelector('#prev').addEventListener('click', function() {
const active_row = document.querySelector('.active');
const active_index = active_row.rowIndex;

if (active_index > 1) {
active_row.classList.remove('active');
table_rows[active_index - visible_rows - 1].classList.add('active');
showRows();
}
});

工作的例子:

const visible_rows = 2;
const table_rows = document.querySelectorAll('tbody tr');
if (!document.querySelector('.active')) {
table_rows[0].classList.add('active');
}

function showRows() {
let active_row = document.querySelector('.active');

for (i = 0; i < table_rows.length; i++) {
table_rows[i].classList.remove('visible');
}

for (i = 0; i < visible_rows; i++) {
active_row.classList.add('visible');

if (active_row.nextElementSibling) {
active_row = active_row.nextElementSibling;
}
}
}
document.querySelector('#next').addEventListener('click', function() {
const active_row = document.querySelector('.active');
const active_index = active_row.rowIndex;

if (table_rows.length > active_index + visible_rows - 1) {
active_row.classList.remove('active');
table_rows[active_index + visible_rows - 1].classList.add('active');
showRows();
}
});
document.querySelector('#prev').addEventListener('click', function() {
const active_row = document.querySelector('.active');
const active_index = active_row.rowIndex;

if (active_index > 1) {
active_row.classList.remove('active');
table_rows[active_index - visible_rows - 1].classList.add('active');
showRows();
}
});
showRows();

tbody tr:not(.visible) {
display: none;
}

<table class="table" border=1>
<thead>
<tr>
<th>Full Name</th>
<th>Company</th>
<th>Email</th>
<th>Phone Number</th>
<th>Note</th>
<th>ID</th>
<th>Item Barcode</th>
</tr>
</thead>

<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>1</td>
<td>D</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>4</td>
<td>H</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>I</td>
<td>J</td>
<td>K</td>
<td>7</td>
<td>L</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<button id="next" type="button" class="btn btn-primary" name="button">Next</button>
<button id="prev" type="button" class="btn btn-primary" name="button">Previous</button>