如何在前端动态修改tx_news的itemsPerPage参数并实现页面自动刷新？

Hey there! Let's walk through how to let your frontend users adjust the number of tx_news items per page with automatic page updates. Here's a practical, step-by-step approach:

First, add a simple dropdown (or input field) where users can select their preferred number of items. Place this near your news list, like above the pagination controls:

<div class="items-per-page-selector">
  <label for="itemsPerPage">Show:</label>
  <select id="itemsPerPage">
    <option value="5">5 items</option>
    <option value="10" selected>10 items</option>
    <option value="20">20 items</option>
    <option value="50">50 items</option>
  </select>
</div>

Next, add JavaScript to listen for the user's selection and trigger an update. You have two main options here: full page refresh (simpler) or AJAX-based partial update (smoother experience).

Option A: Full Page Refresh (Quick Implementation) #

This method updates the URL with the selected value and reloads the page, which works seamlessly with tx_news' existing pagination:

const itemsPerPageSelect = document.getElementById('itemsPerPage');

// Set the initial value from the current URL parameter (if exists)
const currentItemsPerPage = new URLSearchParams(window.location.search).get('itemsPerPage');
if (currentItemsPerPage) {
  itemsPerPageSelect.value = currentItemsPerPage;
}

// Listen for selection changes
itemsPerPageSelect.addEventListener('change', (e) => {
  const selectedValue = e.target.value;
  const urlParams = new URLSearchParams(window.location.search);
  
  // Update or add the itemsPerPage parameter
  urlParams.set('itemsPerPage', selectedValue);
  
  // Reload the page with the new parameters
  window.location.href = `${window.location.pathname}?${urlParams.toString()}`;
});

Option B: AJAX-Based Partial Update (Smoother Experience) #

If you want to avoid full page reloads, use AJAX to fetch the updated news list and replace only the relevant DOM section. This requires a bit more backend setup but feels more responsive:

const itemsPerPageSelect = document.getElementById('itemsPerPage');
const newsListContainer = document.getElementById('news-list-container');

itemsPerPageSelect.addEventListener('change', async (e) => {
  const selectedValue = e.target.value;
  const pageUid = 123; // Replace with your news list page UID

  try {
    const response = await fetch('/index.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        eID: 'customNewsList',
        itemsPerPage: selectedValue,
        pageUid: pageUid,
      }),
    });

    const updatedNewsHtml = await response.text();
    newsListContainer.innerHTML = updatedNewsHtml;
  } catch (error) {
    console.error('Failed to update news list:', error);
  }
});

Now, you need to tell tx_news to use the user-selected value instead of the default itemsPerPage setting. Use TypoScript to read the GET parameter and override the configuration:

plugin.tx_news.settings.list.paginate.itemsPerPage = TEXT
plugin.tx_news.settings.list.paginate.itemsPerPage {
  // Read the value from the URL's itemsPerPage parameter
  data = GP:itemsPerPage
  // Fallback to your default value if no parameter is present
  ifEmpty = 10
  // Ensure the value is an integer to prevent invalid inputs
  intval = 1
}

Optional: Restrict to Valid Values #

To prevent users from entering arbitrary numbers (like 0 or 1000), add an override to limit allowed values:

plugin.tx_news.settings.list.paginate.itemsPerPage = TEXT
plugin.tx_news.settings.list.paginate.itemsPerPage {
  data = GP:itemsPerPage
  // Default to 10 if the parameter isn't one of the allowed values
  override = 10
  override.if {
    equals.data = GP:itemsPerPage
    value = 5
    negate = 1
    equals.value = 10
    negate = 1
    equals.value = 20
    negate = 1
    equals.value = 50
    negate = 1
  }
  intval = 1
}

• Pagination Sync: When using the full page refresh method, tx_news will automatically adjust pagination (e.g., if a user switches from 10 to 20 items, the page number will reset to 1 if needed).
• Validation: Always validate the incoming parameter (we used intval in TypoScript) to avoid breaking the news list with invalid values.
• AJAX Backend Setup: If you go the AJAX route, you'll need to create a custom eID script in your TYPO3 extension to render the updated news list and return it as HTML.

内容的提问来源于stack exchange，提问作者SteveLeg