<table id="example" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%">
<thead>
 <tr>
     <th>Tank Number</th>
     <th>Product</th>
     <th>Shift Opening Date</th>
     <th>Shift Closing Date</th>
     <th>Tank Opening Volume
(Liters)</th>
     <th>Tank Closing Volume
(Liters)</th>
     <th>Tank Water Opening Volume
(Liters)</th>
     <th>Tank Water Closing Volume
(Liters)</th>
     <th>Tank Opening Level
(mm)</th>
     <th>Tank Closing Level
(mm)</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/ShiftTankReport/shiftTankData.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": "Tank_Id" },
            { "data": "Product_Text" },
            { "data": "Close_Date" },
            { "data": "Open_Date"},
            { "data": "Open_Vol" },
            { "data": "Close_Vol" },
            { "data": "Open_Water_Vol" },
            { "data": "Close_Water_Vol" },
            { "data": "Close_Level" },
            { "data": "Close_Level" },
        ],
        "order": [[1, 'asc']],
       
    } );
} );
</script>