javascript - 数据表服务器端添加带参数的列

Question

使用数据表服务器端添加带有参数的列时遇到问题。当在服务器端创建数据表而无需附加列(仅查询列表形式数据库)时，它工作正常。 但当我想添加一列具有值 ID 时，我遇到了困难。

我的脚本(JS):

  var dataTable = $('#mytablex').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
            url :"<?php echo base_url();?>admin/ap_invoice/getPOs", // json datasource
            type: "post",  // method  , by default get
             "data": {
                  "posupplier_id": $('#vendor_id').val()
              },
            error: function(){  // error handling
                $(".employee-grid-error").html("");
                $("#mytablex").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
            }
        },
       "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<input type='checkbox'  id='supid[]' name='supid[]'>"
    } ]
    } );

当我添加时

<input type='checkbox'  id='supid[]' name='supid[]'> 

如何填充每个rowid的值，我想变成这样

<input type='checkbox'  id='supid[]' name='supid[]' value='row->po_id'> 

Answer 1

或者您可以使用select ext 。

$(document).ready(function () {
    var events = $('#events');
    var table = $('#example').DataTable({
    //you can change data to ajax, there is an example 
        data: [{
            "id": 1,
            "name": "datatables",
            "position": "anywhere",
            "office": "stackoverflow",
            "age": 18,
            "salary": 341
        }],
        dom: 'Bfrtip',
        columns: [
            {
                "data": "id"
            },
            {
                "data": "name"
            },
            {
                "data": "position"
            },
            {
                "data": "office"
            },
            {
                "data": "age"
            },
            {
                "data": "salary"
            }
     ],
        columnDefs: [{
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        order: [[1, 'asc']],
        buttons: [
            {
                text: 'Get selected data',
                action: function () {
                    var count = table.rows({
                        selected: true
                    }).count();
                    events.prepend('<div>' + count + ' row(s) selected</div>');
                    
                    var data = table.rows({
                        selected: true
                    }).data().toArray();
                    //print whole row data
                    console.log(data);
                    //print id
                    console.log(data[0].id);
                   
                }
            }
        ]
    });
});

#events {
        margin-bottom: 1em;
        padding: 1em;
        background-color: #f6f6f6;
        border: 1px solid #999;
        border-radius: 3px;
        height: 100px;
        overflow: auto;
    }

<link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>