Question

我有一个搜索结果表，其中包含一个允许用户选择1行或更多行的复选框 - 目前在单个页面上正常工作。但是我必须使用分页将结果限制为每页20行，因此一旦用户单击“下一页”按钮转到搜索结果的第二页，它们的选择就会丢失。

有没有办法让他们在页面之间保持选择？

以下是表格如何与设置隐藏表单输入的脚本一起显示的示例：

$(function() {


  //column checkbox select all or cancel
  $("input.select-all").click(function() {
    var checked = this.checked;
    $("input.select-item").each(function(index, item) {
      item.checked = checked;
    });
    // update the hidden input with the selected selectedProductIDs
    var items = [];
    $("input.select-item:checked:checked").each(function(index, item) {
      items[index] = item.value;
    });
    if (items.length < 1) {
      $('#selectedProductIDs').val('');
    } else {
      var values = items.join(',');
      $('#selectedProductIDs').val(values);
    }
  });

  //check selected items
  $("input.select-item").click(function() {
    var checked = this.checked;
    console.log(checked);
    checkSelected();
    // update the hidden input with the selected assetIDs
    var items = [];
    $("input.select-item:checked:checked").each(function(index, item) {
      items[index] = item.value;
    });
    if (items.length < 1) {
      $('#selectedProductIDs').val('');
    } else {
      var values = items.join(',');
      $('#selectedProductIDs').val(values);
    }

  });

  //check is all selected
  function checkSelected() {
    var all = $("input.select-all")[0];
    var total = $("input.select-item").length;
    var len = $("input.select-item:checked:checked").length;
    console.log("total:" + total);
    console.log("len:" + len);
    all.checked = len === total;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
    <th class="text-center" scope="col">Product ID</th>
    <th class="text-center" scope="col">Description</th>
  </thead>
  <tbody>

    <tr class="" id="85799">
      <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
      <td>12345</td>
      <td>Apples</td>
      <td></td>
    </tr>
    <tr class="" id="85800">
      <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
      <td>67890</td>
      <td>Bananas</td>
      <td></td>
    </tr>
    <tr class="" id="85801">
      <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
      <td>55441</td>
      <td>Oranges</td>
      <td></td>
    </tr>
  </tbody>
</table>

<form class="form-horizontal" id="processSelections" action="processSelections.php" method="post" role="form">
  <input type="hidden" name="selectedProductIDs" id="selectedProductIDs" value="">

  <div>

    <div class="text-center">
      <button type="submit" name="buttonType" value="createShipments" id="save" class="btn btn-success">Process Selections</button> &nbsp; &nbsp;
    </div>
  </div>

</form>

Answer 1

我最终让AJAX脚本调用了一个PHP页面，该页面使用所选项目更新了$ _SESSION变量，因此这将在页面之间保持不变。

跨多个页面存储表行选择

1 个答案: