display another data table on click of data of data table's row/column
display another data table on click of data of data table's row/column
prats
Posts: 45Questions: 21Answers: 0
I am initializing data table using ajax, calling a web service to return json data. It's working fine, but now I want to extract/display another data table on click of any value from column suppose it's project(project->xyz->next data table),so that on click I will get next hierarchy. I have read many solutions but did not get exact one.Help me to hit that.Thanks.
<html>
<head>
<h2 style="color:#2196F3;">Tickets Status</h2>
<script type="text/javascript" charset="utf8" src="/js/datatable/pratik/ColumnFilterWidgets.js"></script>
<link rel="stylesheet" type="text/css" href="/js/datatable/pratik/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="/js/datatable/pratik/ColumnFilterWidgets.css"/>
<link rel="stylesheet" type="text/css" href="/js/datatable/font-awesome.css" />
</head>
<body>
<p>
<input id="chk" type="checkbox" name="your-group"/>Enable/Disable Fixed Header!</p>
<table id="example" class="display cell-border" cellspacing="0" width="100%">
</table>
<script>
$(document).ready(function() {
var realPath ="http://localhost:8080";
var webServicePathm = realPath+"/mt/saasreporting/getopenticketssummary?";
//var project = projectname.innerText;
var parmUrl = "tenantid=BISIL";
var webCallUrl = webServicePathm+parmUrl;
var table= $('#example').DataTable( {
"ajax": {
"url":webCallUrl,
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'>View message</a>';
}
return json;
}
}
});
$('#chk').on( 'click', function (){
if($('#chk').prop('checked')){
table.fixedHeader.enable();
alert('Enabled Fixed Header');
}
else if(!$('#chk').prop('checked')){
table.fixedHeader.disable();
alert('Disabled Fixed Header');
}
});
});
</script>
</body>
</html>
This question has accepted answers - jump to:
This discussion has been closed.
Answers
I've done this, but not excactly as you want. Instead I have a column with an icon, when user clicks on that a new table will open underneath the first table, containing subdata for that row in the first table. Maybe you can get some help on the way anyway...?
Here's some code snippets, I'll try to explain how, hope it makes sence:
Here are the two tables, the first is always visible, the second is hidden and contain no data at first.
Here's the first table (tbl-admin-blasts, bTable) initiated. as you see my second column just has a icon inside a <a> tag with the class "holes". That's important for opening the second table...
Here's the code for initiating the second table (tbl-admin-holes, hTable). The datatable section is wrapped inside of a function where if you click the icon in the first table (<a> tag with the class "holes") I first set some variables, and then remove "hidden" class from this sub table.
bl_id is a important, global variable so I can attach it as a GET with the Ajax URL so the php-page know what data we want to collect. It actually retrieves it's value from the clicked row's id in table 1, which is the value everything depends on.
Note that these two tables call different php-pages. Note also the hTable.destroy, in case you click another row in the first table.
This is the php-page called from the second table(hTable). I use the GET variable 'bid' received from the call to determine what data to return. $blastid is the main variable here, I set it from the GET variable 'bid' above. Note however, that I check if $_POST['action'] is set. That's because when I just click the table 1 to show table 2, there is no action so I get 'bid' from a GET. Otherwise, if I edit or create there is an action so I instead receive the 'bid' from a POST, which is really a hidden field in the client side Editor containing the correct 'blastid'.
For this to work your database table will need to have to contain the id from the main table. In this case blast_id...
```php
<?php
session_start();
include 'session.php';
$sess = new Sessions();
$this_page_role = 1;
if(!$sess->checkSession() || !$sess->verifyAccessRole($_SESSION['roles'], $this_page_role)){
$sess->closeSession();
header("Location: ../public_html/login.php");
exit();
}
// DataTables PHP library
include( "../php/DataTables.php" );
require_once 'configDB.php';
require_once 'MysqliDb.php';
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
$blastid = "";
if(!isset($_POST['action'])){
$blastid = $_GET['bid'];
}
else{
$blastid = $_POST['bid'];
}
function getBlastId(){
global $blastid;
return $blastid;
}
function validateHoleNr($v){
if ( isset( $_POST['action'] ) && $_POST['action'] === 'create' ) {
if(ctype_digit($v)){
$db2 = new MysqliDb(Host, DBUserID, DBUserPassword, DBName);
$db2->where ("hole_nr", $v);
$db2->where ("blast_id", getBlastId());
$cnt = $db2->getValue ("holes", "count(hole_id)");
return $cnt > 0 ? 'Hålnummer existerar redan' : true;
//return $v . ", " . $cnt;
}
else{
return $v !== "EXTRA" ? 'Ange antingen ett hålnummer eller EXTRA...' : true;
}
}
else{
return true;
}
}
Editor::inst( $db, 'holes', 'hole_id' )
<?php > ``` ?>->debug(false)
->field(
Field::inst( 'holes.hole_nr' )
->validator( 'Validate::notEmpty', array(
"message" => 'Fältet får ej vara tomt...'
))
->validator( 'Validate::noTags', array(
"message" => "Fältet innehåller ogiltiga tecken..."
))
->validator( 'Validate::xss', array(
"message" => "Xss warning..."
))
->validator( function ( $val, $data, $opts ) {
return validateHoleNr($val);
} ),
Field::inst( 'holes.hole_depth' )
->validator( 'Validate::notEmpty', array(
"message" => "Du måste ange planerat håldjup..."
))
->validator( 'Validate::numeric', array(
"message" => "Håldjup måste ha ett numeriskt värde..."
)),
Field::inst( 'holes.hole_drilled' )
->validator( 'Validate::numeric', array(
'message' => 'Felaktigt borrvärde...'
)),
Field::inst( 'holes.hole_boostered' )
->validator( 'Validate::numeric', array(
"message" => "Fel boostringsvärde..."
)),
Field::inst( 'holes.hole_kaxed' )
->validator( 'Validate::numeric', array(
"message" => "Fel kaxvärde..."
)),
Field::inst( 'holes.hole_redrill' )
->validator( 'Validate::numeric', array(
"message" => "Fel uppborrningsvärde..."
)),
Field::inst( 'holes.hole_info' )
->validator( 'Validate::maxLen', array(
"max" => "50",
"message" => "Fältet får innehålla max 50 tecken..."
))
->validator( 'Validate::noTags', array(
"message" => "Fältet innehåller ogiltiga tecken..."
))
->validator( 'Validate::xss', array(
"message" => "Xss warning..."
)),
Field::inst( 'holes.blast_id' )
->set( Field::SET_CREATE )
->validator( 'Validate::numeric', array(
"message" => "Fel värde på salvans id..."
))
->setValue(getBlastId())
)
->where('blast_id', $blastid)
->process($_POST)
->json();
thanks ztevie. It is really helpful direction for me.
No problem... I've gotten lots of help when I've been stuck so it's nice to give back to the community on the rare occasions I actually can.
Also, forgot to mention, but the php included here is built on the commercial Editor classes, so if you don't have that you'd need to write your own php.