javascript - 通过ajax将值数组提交到外部php脚本(数据表延迟渲染)

Question

我的一个页面上有一个表单，其中包含与某些信息的主 ID 链接的复选框，这些信息会根据是否选中该复选框而在另一页面上调用。我最近转而在该表上使用 jquery-datatables 并延迟渲染，所以现在看来​​我的表单(使用 php/html 创建)只能看到视口(viewport)中的大约 150 个元素，并且即使所有复选框都已选中，也只能发送这些元素被选中。我的问题是:当我单击“compareRowButton”时，如何从整个表中收集这些复选框 id 并通过 ajax 发送它们？

这是我的表单现在的样子:

<form action='comparables/compare_baddebt.php' method='post' name='compareForm'>
<button type='submit' style='margin-bottom:0px;margin-left:10px;' class='btn btn-default compareRowButton'>Compare Selected Rows</button>

//lets just pretend that the only thing here is the checkbox
<input type='checkbox' id='1' value='1' class='compareCheck' name='post_id[]'/> // checkbox storing id into post_id
<input type='checkbox' id='2' value='2' class='compareCheck' name='post_id[]'/>
</form>

我不完全是一个 jquery 向导，所以请原谅我，但这是我用来选择/取消选择所有复选框的脚本:

$('#selectall').on('click', function() {  //on click 
    var cells = dTable.cells( ).nodes();
    $( cells ).find(':checkbox').prop('checked',this.checked);         
    });

我发布此内容的原因是因为我假设可以调整其中一种方法来获取复选框的值，包括延迟渲染中的隐藏行(.cells().nodes() 是数据表的一部分) API)。

我需要知道的是如何将这些ID存储在jquery中的数组中，然后使用jquery/ajax将它们发布到compare_baddebt.php(表单的操作)，而不是直接提交表单通过 html。

我知道如何通过 ajax post 发送单个变量，但收集数组并以正确的格式发送它以供调用却让我困惑。

目前我的compare_baddebt.php接受post_id数组，如下所示:

$in = $_POST['post_id'];

然后使用 foreach 循环遍历数组以调用各个行并将它们放入新表中进行比较。

foreach ($in as $id){
    $query = $link->prepare("SELECT id,provider_num, provider_name, 261_total_bad_debts, 271_medicare_bad_debts, 281_non_medicare_bad_debts, 1_cost_to_charge_ratio, 291_cost_of_non_mcr_bad_debts
                            FROM `s10`
                            WHERE `id` = :id");
    $query->bindParam(':id', $id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetch(PDO::FETCH_ASSOC);

提前致谢，如果您需要更多信息，我很乐意提供

Answer 1

通过延迟渲染，并非所有表格行都会立即可用，因此您将无法查询或设置所有复选框的状态。

为了能够发送选中的项目列表，您需要为每个复选框添加单击事件处理程序，并将其状态作为键/值对存储在全局变量中。提交表单后，您需要将此对象转换为仅包含选中项的数组。

下面只是一个例子来说明上述逻辑，请根据您的需要进行修改。

JavaScript:

// Global variable holding current state of the check boxes
var g_compare_posts = {};

// Handle click on compare check box
$('table.dataTable').on('click', '.compareCheck', function (e){
    g_compare_posts[this.value] = this.checked;
});

// Handle click on 'Submit' button
$('.compareRowButton').on('click', function(e){
   // Produce a list of checked items
   var compare_posts_checked = [];
   for (var post_id in g_compare_posts) {
      if (g_compare_posts.hasOwnProperty(post_id) && g_compare_posts[post_id]) {
         compare_posts_checked.push(post_id);
      }
   }

   // Send AJAX request
   $.ajax(document.compareForm.action, {
      'data': {'post_id' : compare_posts_checked }
   });

   e.preventDefault();
});

如果您希望能够选择所有复选框，则需要将该复选框的状态发送到服务器端 PHP 脚本并相应地调整您的 SQL 查询，即不应用 WHERE条件或应用用于生成初始表的相同条件。