在datatables php中发出获取复选框字段的问题

时间:2018-03-27 09:50:46

标签: php jquery datatable datatables datatables-1.10

我正在使用PHP处理数据表。

我在第一列有一个表格,其中有一个复选框,显示Select All,每行都有一个复选框。 datatable image

当用户点击全选复选框时,只有那些可见行的复选框值将被提取并在点击提交后显示在php中。

PHP output when clicked on select all

问题是,当我从第2页选择一个复选框时,说我已经检查了ID为13 Clicked on Australia 的澳大利亚,我转到第3页并且没有选择任何内容。然后点击提交我没有得到澳大利亚的$_POST字段名称。PHP out put when row checked box is selected and move to next page

但是什么时候但是当检查澳大利亚并点击提交而不更改页面时,它会获取$_POST详细信息。 Clicked on Australia and then submit

我想知道当我从不同的页面中选择多个复选框时,他们的方式是获取复选框数据到php。

我正在使用最新的数据表js文件。

图像用于让开发人员理解。

以下是我的HTML代码

view.php

<

?php
require 'conn.php';

$sql = "SELECT * FROM tbl_country";
$result = $conn->query($sql);

$country_array = array();

if ($result->num_rows > 0) {
    // output data of each row
    while ($row = $result->fetch_assoc()) {
        $country_array[] = $row;
    }
} else {
    echo "0 results";
}
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    </head>
    <body>
        <br>
        <br>

        <div class="container">
            <form action="process.php" method="post">
                <input type="submit" name="submit" value="submit">
                <table class="table table-bordered" id="example" >
                    <thead>
                        <tr>
                            <th>
                                <label for="select_all">
                                    <input type="checkbox" id="select_all" onclick="selectAll()" name="select_all" value="1" > Select All
                                </label>
                            </th>
                            <th>id</th>
                            <th>name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        foreach ($country_array as $value) {
                            ?>
                            <tr>
                                <td>
                                    <label for="select_one_<?php echo $value['country_id']; ?>">
                                        <input type="checkbox" class="common_class" id="select_one_<?php echo $value['country_id']; ?>" name="select_one_<?php echo $value['country_id']; ?>" value="select_one_<?php echo $value['country_id']; ?>">
                                    </label>
                                </td>
                                <td><?php echo $value['country_id']; ?></td>
                                <td><?php echo $value['country_name']; ?></td>
                            </tr>
                            <?php
                        }
                        ?>
                    </tbody>
                </table>
            </form>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
        </script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
        </script>

        <script>
            $(document).ready(function () {
                $('#example').DataTable({
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
                });
            });

            function selectAll() {
                var is_checked = document.getElementById('select_all').checked;

                if (is_checked) {
                    $('.common_class').prop('checked', true);
                } else {
                    $('.common_class').prop('checked', false);
                }

                console.log(is_checked);
            }
        </script>
    </body>
</html>

PHP FILE process.php代码

    <?php
    echo '<pre>';
    print_r($_POST);
?>

php file conn.php

    <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tempco_cms";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

提前致谢

2 个答案:

答案 0 :(得分:0)

使用serializeArray和ajax提交所有复选框(选中/取消选中)

var frmData = $("#my_form").serializeArray(); //my_form the id of your form
$(".common_class").each(function(){
 frmData.push({name: "country_selection[]", value: $(this).val()}); 
});

$.ajax({
 url: "your_action_url",
 type: 'POST',
 data: frmData,
 cache: false,
 success: function(result) {  
 },
 error: function(result) {
  }
 }); 

这将发布所有表单字段和一个名为country_selection []

的新对象数组

在您的php中,您现在可以使用

进行迭代
$checkbox = $_POST['common_selection'];
for($i=0;$i<count($checkbox);$i++){
echo $checkbox[$i];
}

答案 1 :(得分:0)

$('#deleteTriger').on("click", function(event){ // triggering delete one by one
        if( $('.deleteRow:checked').length > 0 ){  // at-least one checkbox checked
            var ids = [];
            $('.deleteRow').each(function(){
                if($(this).is(':checked')) {
                    ids.push($(this).val());
                }
            });
            var ids_string = ids.toString();  // array to string conversion
            console.log(ids_string);
            $.ajax({
                type: "POST",
                url: "/getIds.php",
                data: {data_ids:ids_string},
                success: function(result) {
                    table.draw(); // redrawing datatable
                },
                async:false
            });
        }
    });

并在php文件中获取所有选定的ID,例如$ data_ids = $ _POST ['data_ids'];