<table id="example" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%">
        <thead>
         <tr>
             <th>Pump Number</th>
             <th>Fuel Grade</th>
             <th>Shift Opening Date</th>
             <th>Shift Closing Date</th>
             <th>Unit Price</th>
             <th>Volume</th>
             <th>Amount</th>
         </tr>
        </thead>
<!--         <tfoot>
            <tr>
                <th>Pump Number</th>
                <th>Fuel Grade</th>
                <th>Shift Opening Date</th>
                <th>Shift Closing Date</th>
                <th>Unit Price</th>
                <th>Volume
                <th>Amount</th>
            </tr>
        </tfoot> -->
    </table>
<script type="text/javascript">
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "api/v1/ShiftSaleReport/shiftSaleData.txt",
         "dom": 'Bfrtip',
        "buttons": [
            'copy',
            'csv',
            'excel',
            'pdf',
            'print',
            // {
            //     extend: 'print',
            //     text: 'Print all (not just selected)',
            //     exportOptions: {
            //         modifier: {
            //             selected: null
            //         }
            //     }
            // }
        ],
        "select": true,
        "columns": [
            { "data": "Fp_Id" },
            { "data": "Grade_Name" },
            { "data": "Open_Date"},
            { "data": "Close_Date" },
            { "data": "Price" },
            { "data": "Volume" },
            { "data": "Amount" },
        ],
        "order": [[1, 'asc']],
       
    } );
} );
</script>