Question

我目前有一个下拉列表，其中包含多个值（即50,100,200等等），当选中该按钮并单击一个按钮重新加载页面并过滤数据表以显示但是选择了许多结果。

<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
    <select name="limitNumberOfResults" id="limitNumberOfResultsPerPage" 
     class="single">  
        <option value="10">10</option>  
        <option value="20" selected="selected">20</option>  
        <option value="30">30</option>  
        <option value="40">40</option>  
        <option value="50">50</option>  
        <option value="100">100</option>  
        <option value="200">200</option>  
    </select>
   <input type="submit" class="button" value="Show" name="submitbutton"/>          
</form>

我想将其从下拉列表转换为链接列表。我该怎么做呢？

我试图使用以下内容。

<a href="#" onclick="SearchResultsForm.submit();return false;">
                                10
                            </a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
                                20
                            </a>

但是，我不确定如何识别每页的结果值。

谢谢！

Answer 1

如果您点击10转到与?limitNumberOfResults=10相同的页面，则获取该值以编写代码以获得结果。

<a href="?limitNumberOfResults=10">10</a>

$per_page = $_REQUEST['limitNumberOfResults'];

Answer 2

Jakir Hossain's answer有效（并且不需要JavaScript），但可能需要重新处理链接以包含当前状态。

另一种可能性是您使用隐藏字段并在单击链接时更新它;它确实需要JavaScript，但您不必了解传递给服务器的任何其他参数。

<input type="hidden" name="limitNumberOfResults" value="20" />

<a href="#" data-result-count="10" class="set-result-count">10</a>
<a href="#" data-result-count="20" class="set-result-count">20</a>

var form = document.getElementById('SearchResultsForm');

// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
  if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
    e.preventDefault();
    form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');   
  }
});

Answer 3

您可以在select标记中使用<select onchange='this.form.submit();'></select>，以便在更改选项时提交表单并获得每页结果值

如何将“每页结果数”转换为链接

3 个答案: