How to export user defined data using DataTables?

2019-08-08 02:06发布

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.

0条回答
登录 后发表回答