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

Posted 2023-05-09

【中文标题】数据表服务器端添加带参数的列

【英文标题】：Datatables server side adding column with parameter

【发布时间】：2016-04-23 02:33:14

【问题描述】：

在使用时遇到问题。当在没有附加列的情况下创建数据表服务器端（仅查询列表表单数据库）时，它工作正常。 但是当我想添加一个具有值 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'> 

【问题讨论】：

只需将 'render' 属性添加到 columnDefs 就像这篇文章：***.com/questions/21051203/…

【参考方案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": "***",
            "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>