在Datatables服务器端处理中添加音频控件和按钮

Question

我将Datatables与Codeigniter-PHP一起使用。

现在在一个表中，我有非常大的数据，所以我使用Datatables服务器端处理来显示我的数据。

我有一个可以播放的音频文件和一个下载文件的按钮。

更早的时候，当我不使用服务器端处理我用来显示它像这样：

<table id="dtMaterialDesignExample" class="table table-striped table-bordered example hoverable"  style="width:100%">
    <thead>
        <tr>
            <th><i class="fas fa-user"></i> Caller </th>
            <th><i class="fas fa-calendar-week"></i> Date</th>
            <th><i class="fas fa-clock"></i> Duration</th>

            <th><i class="fas fa-sort-numeric-down"></i> Recipient Number</th>
            <th><i class="fas fa-play"></i> Recording</th>
            <th><i class="fas fa-download"></i> Download</th>
        </tr>
    </thead>
    <tbody>
       <?php if(count($reports)): foreach($reports as $report): ?>   
        <tr >
            <td><?php echo $report->src; ?></td>
            <td><?php echo $report->calldate; ?></td>
            <td><?php echo $report->duration; ?> Seconds</td>

            <td><?php echo $report->dst; ?></td>
            <td> 
              <audio controls controlsList="nodownload">
                  <source src="<?php echo ccs_recording_path.$report->filename.'-all.mp3'; ?>" type="audio/ogg" data-recordings = "<?php echo $report->filename.'-all.mp3'; ?>">
              </audio>
            </td>
            <td style="text-align: center;"><a href="<?php echo ccs_recording_path.$report->filename.'-all.mp3'; ?>"><i class="fas fa-2x fa-file-download"></i></a> </td>

        </tr>

        <?php endforeach; ?>
          <?php else: ?>
          <tr>
              <td colspan="10">No Records Available</td>
          </tr>
          <?php endif; ?> 
    </tbody>

</table>

现在我已经添加了服务器端我的代码是：

超文本标记语言

<table id="dtMaterialDesignExample" class="table table-striped table-bordered example hoverable"  style="width:100%">
<thead>
    <tr>
        <th><i class="fas fa-user"></i> Caller </th>
        <th><i class="fas fa-calendar-week"></i> Date</th>
        <th><i class="fas fa-clock"></i> Duration</th>

        <th><i class="fas fa-sort-numeric-down"></i> Recipient Number</th>
        <th><i class="fas fa-play"></i> Recording</th>
        <th><i class="fas fa-download"></i> Download</th>
    </tr>
</thead>

</table>

PHP

public function response()
{
    $from_date = "2019-01-01 00:00:00";
    $to_date   = "2019-01-23 00:00:00"; 

    $response = $this->Report_m->get_agent_cdr($from_date,$to_date);

    $response = ["sEcho" => 1,
        "iTotalRecords" => count($response),
        "iTotalDisplayRecords" => count($response),
        "aaData" => $response ];


    $response = json_encode($response);

    echo $response;

}

JAVASCRIPT

$(document).ready(function () {
var table = $('#dtMaterialDesignExample').DataTable({
"lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
"sAjaxSource": "<?php echo site_url('CDR/response'); ?>",
"bProcessing": true,
"aoColumns": [
        { mData: 'src' } ,
        { mData: 'calldate' },
        { mData: 'duration'},
        { mData: 'dst'},
        { mData: '<audio controls controlsList="nodownload"><source src="<?php echo ccs_recording_path.$report->filename.'-all.mp3'; ?>" type="audio/ogg" data-recordings = "<?php echo $report->filename.'-all.mp3'; ?>"></audio>'},
        { mData: '<a href="<?php echo ccs_recording_path.$report->filename.'-all.mp3'; ?>"><i class="fas fa-2x fa-file-download"></i></a>'},
      ],
  dom: '<"float-left"B><"float-right"f>rt<"row"<"col-sm-4"l><"col-sm-4"i><"col-sm-4"p>>',
  fixedHeader: true,
    buttons: [
        {
            extend: 'csvHtml5',
            title: 'bizRTC CDR <?php date('d-m-Y'); ?>',
             customize: function (csv) {
                 return "Enjoy the file"+csv;
              },
               className: 'btn btn-outline-primary waves-effect space',
        },
        {
        extend: 'pdfHtml5',
        title: 'CDR <?php echo date('d-m-Y'); ?>',
        customize: function ( doc ) {
                        doc.content.splice( 0, 0, {
                            text: "bizRTC CDR"
                        } );
        },
        className: 'btn btn-outline-primary waves-effect space',
        },
        {
            extend: 'excelHtml5',

            title: 'bizRTC CDR <?php date('d-m-Y'); ?>',
            message: "Call Records",
            className: 'btn btn-outline-primary waves-effect space',


        },
    ],

  responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                tableClass: 'table'
            } )
        }
    },
    "drawCallback": function () {
        $('.dataTables_paginate > .pagination').addClass('pagination pagination-circle pg-blue mb-0');
    }
});

对于最后两栏，我有音频播放器和按钮，我如何在数据表上显示它们？

Answer 1

您可以使用Datatable中的columnDefs来呈现Datatable中的自定义列值，如下所示：，

var table = $('#myTable').DataTable( {
    columnDefs: [
        { 
         targets: [5],//<- target column index 
         visible: true,
         render: function ( data, type, row, meta ){
            return `<audio controls controlsList="nodownload">
              <source src="<?php echo ccs_recording_path.$report->filename.'-all.mp3'; ?>" type="audio/ogg" data-recordings = "<?php echo $report->filename.'-all.mp3'; ?>">
          </audio>`
          }
        },

    ]
} );

这只是你理解的代码片段，你必须根据你的代码做一些调整。你可以在这里读到更多，

https://datatables.net/reference/option/columns.render