如何在 php 的數據表中添加導出到 excel pdf 按鈕

Question

我已經使用編輯刪除按鈕從數據表中的數據庫中獲取了一些數據，並通過自定義 select 選項過濾了整個數據。

注意：-但我的要求是：-

(1)。 添加導出到數據表中的 excel pdf 按鈕。

(2)。 如何在數據表的單行中添加更多列。

HTML 代碼：-

<table id="example1" class="display table">
<thead>
 <tr>
 <th>S.No</th>
<th>Job Title</th>
<th>Experience</th>
 <th>Salary</th>
 <th>Action</th>
 </tr>
 </thead>
</table>

jQuery / Ajax 代碼：-

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    
 
  <script type="text/javascript" rel="stylesheet">
//displaying data on page start here
        $(document).ready(function(){
            loadDatatableAjax();
        });

        function loadDatatableAjax(){
            $('#example1').DataTable({
                "bDestroy" : true,
                "ajax" : "ajaxCompany_search.php",
                "initComplete" : function(){
                    var notApplyFilterOnColumn = [4];
                    var inputFilterOnColumn = [0];
                    var showFilterBox = 'beforeHeading'; //beforeHeading, afterHeading
                    $('.gtp-dt-filter-row').remove();
                    var theadSecondRow = '<tr class="gtp-dt-filter-row">';
                    $(this).find('thead tr th').each(function(index){
                        theadSecondRow += '<td class="gtp-dt-select-filter-' + index + '"></td>';
                    });
                    theadSecondRow += '</tr>';

                    if(showFilterBox === 'beforeHeading'){
                        $(this).find('thead').prepend(theadSecondRow);
                    }else if(showFilterBox === 'afterHeading'){
                        $(theadSecondRow).insertAfter($(this).find('thead tr'));
                    }

                    this.api().columns().every( function (index) {
                        var column = this;

                        if(inputFilterOnColumn.indexOf(index) >= 0 && notApplyFilterOnColumn.indexOf(index) < 0){
                            $('td.gtp-dt-select-filter-' + index).html('<input type="text" class="gtp-dt-input-filter">');
                            $( 'td input.gtp-dt-input-filter').on( 'keyup change clear', function () {
                                if ( column.search() !== this.value ) {
                                    column
                                        .search( this.value )
                                        .draw();
                                }
                            } );
                        }else if(notApplyFilterOnColumn.indexOf(index) < 0){
                            var select = $('<select><option value="">Select</option></select>')
                                .on( 'change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
             
                                    column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                                } );
                            $('td.gtp-dt-select-filter-' + index).html(select);
                            column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                            } );
                        }
                    });
                }
            
            });
        }
 
</script>  

ajaxCompany_search.php

<?php
include('../../config.php');

$sql = "SELECT * FROM `jobpost` where `status`=1";
$records = mysqli_query($con,$sql);

$resultList = array();

while ($project =  mysqli_fetch_array($records))
    {
        $resultList[] = $project;
    }
        
        $result = array();
        $button = '';
        $i = 1;
        foreach ($resultList as $key => $value) {
             
                        
            $button = '<a class="btn-sm btn-success text-light" onclick="editFun('.$value['id'].')" href="#"> Edit</a> ';

            $button .= ' <a class="btn-sm btn-danger text-light" onclick="deleteFun('.$value['id'].')" href="#"> Delete</a>';

            $result['data'][] = array(
                $i++,
                $value['jobtitle'],
                $value['experience'],
                $value['salary'],
                $button
            );
        }
        
        
        echo json_encode($result);
?>

Answer 1

將以下代碼添加到您的數據表 function

  dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]

例子

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

有關詳細信息，您可以查看