Modify a table with information from another table
Modify a table with information from another table
OscarC
Posts: 19Questions: 5Answers: 0
I am using DataTables with MySQL and PHP.
I have Table A and Table B in the same page.
When the page loads, Table B is intentionally not initialized.
When the user clicks in a row in Table A, I extract one value from the row and I want to use it to refine the query in Table B.
I initialize Table B in the same function that kicks in with the mouse click when the row is selected.
To "refine" the query I am using the code right below. And I think that this is wher the problem has to be.
"ajax":{
"url":"../php/sitevisits.php",
"type": "POST",
"data": {
"siteid": someVariable
}
}
Everything seems to be working well but the query does not get refined.
Using DataTables debugger I can see that the query that is sent does not include the parameter that I want to add.
My guess is that the someVariable that I am using does not go well with what the JSON is expecting me to send, but I could be dead wrong.
What am I missing?
Any help will be very appreciated.
Here is the whole script
<head>
<script>
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "sites.php",
"table": "#Sites",
"fields": [ {
"label": "Count:",
"name": "count"
}, {
"label": "ORD:",
"name": "ord"
}, {
"label": "Affiliation:",
"name": "affiliation"
}, {
"label": "County:",
"name": "county"
}, {
"label": "Region:",
"name": "region"
}, {
"label": "Region from Heat Mapping:",
"name": "regionsforheatmapping"
}
]
} );
var topTable = $('#Sites').DataTable( {
dom: "Bfrtip",
processing:true,
ajax: {
url: "sites.php",
type: "POST"
},
serverSide: true,
columns: [
{ data: 'count' } ,
{ data: 'ord' },
{ data: 'affiliation' },
{ data: 'contact' },
{ data: 'county' },
{ data: 'region' },
{ data: 'regionsforheatmapping' }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
$('#Sites tbody').on('click', 'tr', function () {
var thisRowData = topTable.row( this ).data();
var theSecondTable = $('#SiteVisits').DataTable({
processing:true,
serverSide:true,
"ajax":{
"url":"../php/sitevisits.php",
"type": "POST",
"data": {
"siteid": thisRowData['region']
}
},
columns: [
{ data: "region" },
{ data: "siteid" },
{ data: "datetrapwascollected" },
{ data: "numberoffemale" },
{ data: "numberofmale" },
{ data: "total" }
],
})
} );
} );
</script>
</head>
<body>
<div class='container'>
<h2>Sites</h2>
<table id="Sites" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Count</th>
<th>ORD</th>
<th>Affiliation</th>
<th>Contact</th>
<th>County</th>
<th>Region</th>
<th>Region for Heat Mapping</th>
</tr>
</thead>
</table>
</div>
<div class='container' id='SiteVisitsContainer' style='display:none';>
<h2>Site Visits</h2>
<table id="SiteVisits" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Region</th>
<th>Site ID</th>
<th>Date Trap was Collected</th>
<th>Number of Female</th>
<th>Number of Male</th>
<th>Total</th>
</tr>
</thead>
</table>
</div>
</body>
This is the php, which is very simple
<?php
// DataTables PHP library
include( "../../php/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'wpdatatable_6' )
->fields(
Field::inst( 'siteid' ),
Field::inst( 'datetrapwascollected' ),
Field::inst( 'numberoffemale' ),
Field::inst( 'numberofmale' ),
Field::inst( 'total' )
)
->debug(true)
->process( $_POST )
->json();
Replies
Hi @OscarC ,
It all looks OK. Have you tried console.logging
thisRowData['region']to make sure it's as expected? If all good, it would be worth checking the Ajax payload in the developer tools to see if it's there as expected.Cheers,
Colin
Does this blog post help you?
https://datatables.net/blog/2016-03-25
Kevin
Hi @colin . Yes. I checked thisRowData['region'] in the console.logging and it looks exactly how it is supposed to look.
@kthorngren . Thanks! This is exactly what I want to do. I will go through it to see if I can make it work! Thanks!