如何从DataTable选中行获取Position列值并添加至指定列表？

Got it, let's fix this for you! The issue is that you're only counting selected rows right now—we need to grab the actual Position values from those rows and populate your #items list. Here's how to make it work:

First, here's the updated JavaScript code that fetches selected rows' Position values and adds them to your list:

$(document).ready(function () { 
    var events = $('#events'); 
    var table = $('#example').DataTable({ 
        dom: 'Bfrtip', 
        select: true, 
        buttons: [{ 
            text: 'Get selected data', 
            action: function () { 
                // Get full data of all selected rows
                var selectedRows = table.rows({selected: true}).data();
                var selectedCount = selectedRows.length;
                var positionList = [];

                // Extract Position column (it's the 2nd column, zero-indexed at 1)
                selectedRows.each(function(row) {
                    positionList.push(row[1]);
                });

                // Update events div with selection details
                events.prepend(`<div>${selectedCount} row(s) selected: ${positionList.join(', ')}</div>`);

                // Clear old items before adding new ones
                $('#items').empty();

                // Add each Position as a list item
                positionList.forEach(function(position) {
                    $('#items').append(`<li>${position}</li>`);
                });
            } 
        }] 
    }); 
});

Key Changes Explained: #

• Fetch Selected Rows Data: Instead of just counting rows, we use table.rows({selected: true}).data() to get the full data of every selected row.
• Extract Position Values: Since your Position column is the second one (zero-indexed to 1), we loop through each selected row and collect row[1] into an array.
• Update UI:
  • Clear the #items list first to avoid old entries piling up when you click the button multiple times.
  • Append each Position value as a new <li> element to the list.
  • Show both the count and selected positions in the events div for clarity.

Full Working Code (Including All Required Assets): #

<!DOCTYPE html>
<html>
<head>
    <!-- Add missing DataTables CSS links for proper styling -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet">
    
    <style>
        #events { 
            margin-bottom: 1em; 
            padding: 1em; 
            background-color: #f6f6f6; 
            border: 1px solid #999; 
            border-radius: 3px; 
            height: 100px; 
            overflow: auto; 
        }
    </style>
</head>
<body>
    <div id="events"> Row selected count - new information added at the top </div>
    <ul id="items"></ul>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    
    <script>
        $(document).ready(function () { 
            var events = $('#events'); 
            var table = $('#example').DataTable({ 
                dom: 'Bfrtip', 
                select: true, 
                buttons: [{ 
                    text: 'Get selected data', 
                    action: function () { 
                        var selectedRows = table.rows({selected: true}).data();
                        var selectedCount = selectedRows.length;
                        var positionList = [];

                        selectedRows.each(function(row) {
                            positionList.push(row[1]);
                        });

                        events.prepend(`<div>${selectedCount} row(s) selected: ${positionList.join(', ')}</div>`);

                        $('#items').empty();

                        positionList.forEach(function(position) {
                            $('#items').append(`<li>${position}</li>`);
                        });
                    } 
                }] 
            }); 
        });
    </script>
</body>
</html>

Now, when you select rows (click to toggle selection) and click the "Get selected data" button, the #items list will populate with the Position values of your selected rows—like "System Architect" and "Accountant" when the first two rows are selected.

内容的提问来源于stack exchange，提问作者sdadsa