javascript - 每页上的序列号相同

Question

我在表中使用 Bootstrap 使用客户端分页。我想在每个页面中添加序列号，这样在第 1 页上的 S.No 从 1 到 50 开始，然后在第 2 页上的 s.No 应该是 51 到 100。 ……等等

我改变了我的CSS

.table {
 counter-reset: serial-number;  /* Set the serial number counter to 0     */
}

.table td:first-child:before {
 counter-increment: serial-number;  /* Increment the serial number   counter */
  content: counter(serial-number);  /* Display the counter */
 } 

但现在问题出在第 2 页上，S.No 再次从 1 开始到 50，所以在第 3 页上。有人可以帮助我在其他页面上获得正确的序列号系列。

Answer 1

您可以在 counter-reset 属性中手动设置计数器:

counter-reset: serial-number 50; /* Set counter to 50 */

当然，您必须手动计算这个初始值。在 javascript 分页回调中，您可以使用以下内容更新它:

document.querySelector('.table').style.counterReset = 'serial-number ' + (zeroIndexedPageNo * pageSize);

Demo