Pagination - JSON API V2 Examples

Example 1: Basic Pagination with Table

This example demonstrates basic pagination functionality rendered through the JSON API. The table and pagination controls are automatically initialized when the layout is rendered.

// Create table HTML
const tableHTML = `
  <table class="rsl-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      ${generateTableRows(25)}
    </tbody>
  </table>
`;

// Render via V2 JSON API
const config = {
  version: 2,
  layoutId: "pagination-demo-1",
  breakpoints: { xs: 1 },
  items: [
    {
      id: "table-item",
      content: { type: "html", value: tableHTML }
    },
    {
      id: "pagination-controls",
      content: {
        type: "pagination",
        totalPages: 3,
        currentPage: 1,
        showPrevNext: true,
        showFirstLast: false
      }
    }
  ]
};

RSL.JSONLayout.renderLayout('#demo-output-1', config);

Example 2: Large Dataset with First/Last Controls

This example shows pagination with a larger dataset (50 rows) and includes First/Last navigation buttons alongside Previous/Next.

// Create table with 50 rows
const tableHTML = `
  <table class="rsl-table">
    <thead>
      <tr>
        <th>Product ID</th>
        <th>Product Name</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      ${generateProductRows(50)}
    </tbody>
  </table>
`;

const config = {
  version: 2,
  layoutId: "pagination-demo-2",
  breakpoints: { xs: 1 },
  items: [
    {
      id: "large-table-item",
      content: { type: "html", value: tableHTML }
    },
    {
      id: "pagination-controls",
      content: {
        type: "pagination",
        totalPages: 5,
        currentPage: 1,
        showPrevNext: true,
        showFirstLast: true
      }
    }
  ]
};

RSL.JSONLayout.renderLayout('#demo-output-2', config);

Example 3: Multiple Tables with Independent Pagination

This example demonstrates RSL's ability to handle multiple paginated tables on the same page. Each table maintains its own pagination state independently.

// Create two separate table sections
const table1HTML = `
  <h3>Users Table</h3>
  <table class="rsl-table">
    <thead><tr><th>ID</th><th>Name</th><th>Role</th></tr></thead>
    <tbody>${generateUserRows(20)}</tbody>
  </table>
`;

const table2HTML = `
  <h3>Orders Table</h3>
  <table class="rsl-table">
    <thead><tr><th>Order ID</th><th>Customer</th><th>Total</th></tr></thead>
    <tbody>${generateOrderRows(15)}</tbody>
  </table>
`;

// Render both tables in a single-column layout
const config = {
  version: 2,
  layoutId: "pagination-demo-3",
  breakpoints: { xs: 1 },
  gap: "2rem",
  items: [
    {
      id: "users-section",
      content: { type: "html", value: table1HTML + '<div id="users-pagination"></div>' }
    },
    {
      id: "orders-section",
      content: { type: "html", value: table2HTML + '<div id="orders-pagination"></div>' }
    }
  ]
};

RSL.JSONLayout.renderLayout('#demo-output-3', config);

// Add pagination controls separately
setTimeout(() => {
  RSL.JSONLayout._renderPagination(document.getElementById('users-pagination'), {
    totalPages: 2, currentPage: 1, rowsPerPage: 10
  });
  RSL.JSONLayout._renderPagination(document.getElementById('orders-pagination'), {
    totalPages: 2, currentPage: 1, rowsPerPage: 10
  });
}, 200);