Question

我正在研究数据表，并且我是初学者使用该库。一旦选中复选框，我只想控制台将数据记录在表的一行中。我正在使用复选框扩展名。

资源：

主要示例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Select Multiple Rows With Checkboxes</title>
        <!-- link href="css/bootstrap.min.css" rel="stylesheet" / -->
        <link href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" rel="stylesheet" />
        <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" />
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
    </head>
    
    <body>
    
        <div class="container" style="margin:15px auto">
            <form id="myform" method="post">
                <p><b>Selected rows data</b></p>
                <pre id="view-rows"></pre>
                <p><b>Form data as submitted to the server</b></p>
                <pre id="view-form"></pre>
                <p><button class="btn btn-danger">View Selected</button><br /></p>
                <table id="mytable" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </tfoot>
                </table>
            </form>
        </div>
    
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.dataTables.min.js"></script>
        <script src="js/dataTables.bootstrap.min.js"></script>
        <script src="js/dataTables.checkboxes.min.js"></script>
        <script>
    
            var mytable;
    
            $(document).ready(function () {
                mytable = $("#mytable").DataTable({
                    ajax: 'data.json',
                    columnDefs: [
                        {
                            targets: 0,
                            checkboxes: {
                                seletRow: true
                            }
                        }
                    ],
                    select: {
                        style: 'multi'
                    },
                    order: [[1, 'asc']]
                });            
    
                $(".dt-checkboxes").on("click", function(e) {
                    e.preventDefault();
    
                    var rowSelected = mytable.column(0);
    
                    console.log(rowSelected);
                });
            })
        </script>
    </body>
    
    </html>

如何使用数据表控制台记录每个选中的行复选框？

0 个答案: