How to export user defined data using DataTables?

2019-08-08 02:50发布

问题:

I have a HTML table with a mixture of columns being hard coded values and others being set via java script functions dependant on user input. I can export the hard coded data fine, however it is the user defined values that I can't seem to pull through.

Here is the sample of my project:

function setSquat() {
	var squatMax = document.getElementById("txtSquatInput").value;

	var values = [0.4, //0
		0.5, //1
		0.6, //2
		0.65, //3
		0.7, //4
		0.75, //5
		0.8, //6
		0.85, //7
		0.9]; //8

	var squatVal1 = values[3] * squatMax;
	var squatVal2 = values[5] * squatMax;
	var squatVal3 = values[6] * squatMax;
	var squatVal4 = values[4] * squatMax;
	var squatVal5 = values[6] * squatMax;
	var squatVal6 = values[7] * squatMax;
	var squatVal7 = values[5] * squatMax;
	var squatVal8 = values[7] * squatMax;
	var squatVal9 = values[8] * squatMax;
	var squatVal10 = values[0] * squatMax;
	var squatVal11 = values[1] * squatMax;
	var squatVal12 = values[2] * squatMax;

	//Inputting squat values
	document.getElementById("tdW1S1").innerHTML = Math.round(squatVal1);
	document.getElementById("tdW1S2").innerHTML = Math.round(squatVal2);
	document.getElementById("tdW1D3").innerHTML = Math.round(squatVal3);
	document.getElementById("tdW2D1").innerHTML = Math.round(squatVal4);
	document.getElementById("tdW2D2").innerHTML = Math.round(squatVal5);
	document.getElementById("tdW2D3").innerHTML = Math.round(squatVal6);
	document.getElementById("tdW3D1").innerHTML = Math.round(squatVal7);
	document.getElementById("tdW3D2").innerHTML = Math.round(squatVal8);
	document.getElementById("tdW3D3").innerHTML = Math.round(squatVal9);
	document.getElementById("tdW4D1").innerHTML = Math.round(squatVal10);
	document.getElementById("tdW4D2").innerHTML = Math.round(squatVal11);
	document.getElementById("tdW4D3").innerHTML = Math.round(squatVal12);

	return squatMax;
}
<!-- Datatables links -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script 
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"> 
</script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
    $(document).ready(function () {
    	$('#531Table').DataTable({
    		"stateSave": true,
    		"paging": false,
    		"ordering": false,
    		"info": false,
    		"bFilter": false,
    		dom: 'Bfrtip',
    		buttons: [
    			'pdf',
    			'excel',
    		]
    	});
    });
</script>
<table class="table table-hover" id="531Table">
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col">Squat</th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col">Deadlift</th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col">Bench</th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col">Row</th>
			<th scope="col"></th>
		</tr>
		<tr>
			<!-- Sub Headings -->
			<th scope="col"></th>
			<th scope="col">Sets</th>
			<th scope="col">Reps</th>
			<th scope="col">Base Number</th>
			<th scope="col"></th>
			<th scope="col">Sets</th>
			<th scope="col">Reps</th>
			<th scope="col">Base Number</th>
			<th scope="col"></th>
			<th scope="col">Sets</th>
			<th scope="col">Reps</th>
			<th scope="col">Base Number</th>
			<th scope="col"></th>
			<th scope="col">Sets</th>
			<th scope="col">Reps</th>
			<th scope="col">Base Number</th>
		</tr>
	</thead>
	<tbody>
		<tr id="row1">
			<!-- Week 1 -->
			<!--Squat -->
			<th scope="row"></th>
			<td>1 - 65%</td>
			<td>5</td>
			<td id="tdW1S1"></td>
			<td></td>
			<!--Deadlift -->
			<td>1 - 65%</td>
			<td>5</td>
			<td id="tdW1D1"></td>
			<td></td>
			<!-- Bench -->
			<td>1 - 65%</td>
			<td>5</td>
			<td id="tdW1B1"></td>
			<td></td>
			<!-- OHP -->
			<td>1 - 65%</td>
			<td>5</td>
			<td id="tdW1O1"></td>
		</tr>
		<tr id="row2">
			<!--Squat -->
			<th scope="row" class="auto-style2">Week 1</th>
			<td class="auto-style1">2 - 75%</td>
			<td class="auto-style1">5</td>
			<td id="tdW1S2" class="auto-style1"></td>
			<td class="auto-style1"></td>
			<!--Deadlift -->
			<td class="auto-style1">2 - 75%</td>
			<td class="auto-style1">5</td>
			<td class="auto-style1" id="tdW1D2"></td>
			<td class="auto-style1"></td>
			<!-- Bench -->
			<td class="auto-style1">2 - 75%</td>
			<td class="auto-style1">5</td>
			<td class="auto-style1" id="tdW1B2"></td>
			<td class="auto-style1"></td>
			<!-- OHP -->
			<td class="auto-style1">2 - 75%</td>
			<td class="auto-style1">5</td>
			<td class="auto-style1" id="tdW1O2"></td>
		</tr>
		<tr id="row3" style="border-bottom: solid">
			<!--Squat -->
			<th scope="row"></th>
			<td>3 - 80%</td>
			<td>5</td>
			<td id="tdW1S3"></td>
			<td></td>
			<!--Deadlift -->
			<td>3 - 80%</td>
			<td>5</td>
			<td id="tdW1D3"></td>
			<td></td>
			<!-- Bench -->
			<td>3 - 80%</td>
			<td>5</td>
			<td id="tdW1B3"></td>
			<td></td>
			<!-- OHP -->
			<td>3 - 80%</td>
			<td>5</td>
			<td id="tdW1O3"></td>
		</tr>
	</tbody>
</table>

I've added the first three rows of the table data, two of which are just headings. The cells in question I am not getting through are in row 3 with the id values tdW1DX

This is an example of one of the js functions executed onclick - I do realize there are probably more efficient ways of doing this, however this is what works for me

I want the user to input their desired values, perform the calculation, have those placed in the table and then be able to export the table including their specific values.