<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>