Every 10 row of my table I want to show them seperatly-CodePudding

In my Django project I have a table which datas coming from database. There can be hundreds of rows. I can't display all in one page. I want to display my tables 10 rows for each. I got two buttons for next and previous rows. Can I do this with jquery or some python code?

index.html

<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"  name="button">Next</button>
<button type="button"  name="button">Previous</button>

CodePudding user response：

You can use bootstart datatables for this:

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<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>

For More information you can refer https://datatables.net/

CodePudding user response：

You could use the rowIndex and two classes (for example .active and .visible) for the first visible row and the styling via CSS:

If there is no class .active add it to the first row:

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

In the next step (at best in a separate function, for example showRows()) remove the class .visible from all rows and then add it to so many rows like you defined with the constant visible_rows, beginning with the active row:

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;
    }
  }
}

In the event handlers for #next and #previous just move the class .active by the number of visible rows, if there are rows left in that direction, and call the function 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();
  }
});

Working example:

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  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"  name="button">Next</button>
<button id="prev" type="button"  name="button">Previous</button>