DataTables Dropdown Menu that pulls multiple columns from MySQL Database - php

I was wondering if it is possible for me to add a dropdown into the Associated Floor Plans section of the table. In this dropdown I'd like to add other URL's that are stored in the database. Would I be creating a new column in the database to call the additional URL's that are stored in Google Drive and how would I go about creating a dropdown showing all the files associated with that floor.
It's an extremely particular question seeing as it would be calling additional items from the database into what in essence is the same column.
Thank you for your instance. Also, feel free to critique the methods I've used in my code.
<?php
$con = mysql_connect("localhost", "root", "root");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("Test_Data", $con);
$result = mysql_query("SELECT * FROM Test_DataSet");
?>
<html>
<head>
<title>TEST TABLE</title>
<meta http-equiv="Content-Type" content="text/hmtl; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="DataTables-1.10.1/media/js/jquery.js" type="text/javascript"></script>
<script src="DataTables-1.10.1/media/js/jquery.DataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style type="text/css">
#import "DataTables-1.10.1/media/css/jquery.dataTables.css";
</style>
<style type="text/css">
#import "DataTables-1.10.1/examples/resources/bootstrap/3/dataTables.bootstrap.css";
</style>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
<style> iframe{border: none; width: 20}</style>
</head>
<body>
<div>
<table id="datatables" class="hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>View on WebPage</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($result)){
?>
<tr class ="odd gradeX">
<td><?php echo $row['Building']; ?></td>
<td><?php echo $row['Floor']; ?></td>
<td><?php echo $row['Number_Of_AP']; ?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['Associated_Floor_Plans'].'" target="_blank">'.$row['Associated_Floor_Plans'].'</a>';?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['View_On_Webpage'].'" target="_blank">View in AMP<'.$row['View_On_Webpage'].'</a>';?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>

Related

can't transfer php ajax to mysql amchart chart

php ajax and mssql amchart graphic design I'm using. I only want to get out of the graphics when I do the graphics when the page is opened only when I open it, but loading data is coming where the chart is located
I'm pulling my data from range.php
amchart does not come to my garage alone, I am using ajax method
please help me as my code below
index.php page
<?php
$conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
$query = "SELECT TOP (1000) [id]
,[firin_adi]
,[Akim]
,[voltaj]
,[Guc]
,[zaman]
FROM [Mapa].[dbo].[test]";
$sql = odbc_exec($conn, $query);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL | softAOX Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
</head>
<body>
<br/>
<div class="container">
<h2 align="center">Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL</h2>
<br/>
<br/>
<div class="col-md-2">
<input type="text" name="From" id="From" class="form-control" placeholder="From Date"/>
</div>
<div class="col-md-2">
<input type="text" name="to" id="to" class="form-control" placeholder="To Date"/>
</div>
<div class="col-md-8">
<input type="button" name="range" id="range" value="Range" class="btn btn-success"/>
</div>
<div class="clearfix"></div>
<br/>
<div id="purchase_order">
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="35%">firin_adi</th>
<th width="40%">Akim</th>
<th width="10%">Voltaj</th>
<th width="5%">zaman</th>
</tr>
<?php
while($row= odbc_fetch_array($sql))
{
?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["firin_adi"]; ?></td>
<td><?php echo $row["Akim"]; ?></td>
<td><?php echo $row["voltaj"]; ?></td>
<td>$ <?php echo $row["zaman"]; ?></td>
</tr>
<?php
}
?>
<tr>
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"titles":[{"text":"Step Line Chart"}],
"theme": "none",
"autoMarginOffset":0,
"dataLoader": {
"url": "http://localhost/filter/range.php"
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
"type": "step",
"lineThickness": 2,
"bullet":"square",
"bulletAlpha":0,
"bulletSize":4,
"bulletBorderAlpha":0,
"valueField": "Akim"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#882525",
"scrollbarHeight":100,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":1,
"graphLineColor":"#c2c253",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"fullWidth":true,
"categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
"cursorAlpha": 0.01,
"graphBulletAlpha": 10
},
"categoryField": "zaman",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
}
});
chart.addListener("dataUpdated", zoomChart);
function zoomChart(){
chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>
<!-- HTML -->
<div id="chartdiv"></div>
</tr>
<?php
?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<!-- Script -->
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#From").datepicker();
$("#to").datepicker();
});
$('#range').click(function(){
var From = $('#From').val();
var to = $('#to').val();
if(From != '' && to != '')
{
$.ajax({
url:"range.php",
method:"POST",
data:{From:From, to:to},
success:function(data)
{
$('#purchase_order').html(data);
}
});
}
else
{
alert("Please Select the Date");
}
});
});
</script>
</body>
</html>
//////////////
range.php page
<!doctype html>
<html>
<head><script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script></head>
<?php
// Range.php
if(isset($_POST["From"], $_POST["to"]))
{
$conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
$result = '';
$query = "SELECT TOP (1000) [id]
,[firin_adi]
,[Akim]
,[voltaj]
,[Guc]
,[zaman]
FROM [Mapa].[dbo].[test] WHERE [zaman] BETWEEN '".$_POST["From"]."' AND '".$_POST["to"]."'";
$sql = odbc_exec($conn, $query);
$result .='
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="35%">Cfirin_adi</th>
<th width="40%">Akim/th>
<th width="10%">guc</th>
<th width="5%">zaman</th>
</tr>
';
if(odbc_num_rows($sql) > 0)
{
while($row = odbc_fetch_array($sql))
{
$result .='
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["firin_adi"].'</td>
<td>'.$row["Akim"].'</td>
<td>'.$row["voltaj"].'</td>
<td>'.$row["zaman"].'</td>
</tr>';
}
$result .='<tr>
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"titles":[{"text":"Step Line Chart"}],
"theme": "none",
"autoMarginOffset":0,
"dataLoader": {
"url": "http://localhost/filter/range.php"
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
"type": "step",
"lineThickness": 2,
"bullet":"square",
"bulletAlpha":0,
"bulletSize":4,
"bulletBorderAlpha":0,
"valueField": "Akim"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#882525",
"scrollbarHeight":100,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":1,
"graphLineColor":"#c2c253",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"fullWidth":true,
"categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
"cursorAlpha": 0.01,
"graphBulletAlpha": 10
},
"categoryField": "zaman",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
}
});
chart.addListener("dataUpdated", zoomChart);
function zoomChart(){
chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>
<!-- HTML -->
<div id="chartdiv"></div>
</tr>';
}
else
{
$result .='
<tr>
<td colspan="5">No Purchased Item Found</td>
</tr>';
}
$result .='</table>';
echo $result;
}
?>
<body>
</body>
</html>

Live display of datatables using Jquery Ajax PHP

I just want to know how can i fetch the design of the datatables of my table. Because the filter and the pagination of the table is not working. Heres my code.
i have this plugin in my
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<script src="../assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.js"></script>
<script src="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.js"></script>
<script src="../assets/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script src="../assets/vendor/datatables-tabletools/dataTables.tableTools.js"></script>
display
<div id="table_data" >
</div>
script
fetch_data();
function fetch_data()
{
var action = "fetch";
$.ajax({
url:"table/serviceTypeTable.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#table_data').html(data);
}
})
}
query for fetch:
if(isset($_POST["action"]))
{
if($_POST["action"] == "fetch")
{
$qry = mysql_query("select * from services_type")or die(mysql_error());
$count = mysql_num_rows($qry);
$output = '
<table class="table table-hover dataTable table-striped width-full" data-plugin="dataTable">
<thead>
<th>Services Types</th>
<th>Action</th>
</thead>
';
while($row = mysql_fetch_array($qry))
{
$services_type_id = $row['services_type_id'];
$output .= '
<tbody>
<tr>
<td>'.$row['services_type_name'].'</td>
<td style="text-align:center;">
<i class="fa fa-edit"></i>
</td>
</tr>
</tbody>
';
}
$output .= '</table>';
echo $output;
}
}
my problem is the datatables design is not working. that's all thanks :)

I figured it out. I just put this script in query fetch at the button after the
:)
<script>
$("#table").dataTable({
});
</script>

bootstrap editable - how to transfer dropdown value to SQL table?

I am currently working on a project that shows data from an SQL table using bootstrap editable for live editing.
It works fine - changes are transferred to the SQL table. What is already working?:
Showing current value from SQL table
Providing a drop-down for selection
Transferring changed values to SQL table
-> BUT Part 3 (transferring changed value) is only working for free-text input (class xedit).
What I am looking for is the code for: transferring chosen value of drop-down-list to SQL-Table
Here is the HTML-code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">EDIT YOUR CHARACTERS</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">ROLE</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">SECOND ROLE</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM characters");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['id'].'" key="name">'.$fetch['name'].'</td>
<td class="xedit" id="'.$fetch['id'].'" key="role">'.$fetch['role'].'</td>
<td class="xedit2" id="'.$fetch['id'].'" key="secondrole">'.$fetch['secondrole'].' </td>
</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script>
$(function(){
$('.rolestatus').editable({
source: [
{value: 1, text: 'DD'},
{value: 2, text: 'HEAL'},
{value: 3, text: 'TANK'}
]
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is the process.php code
<?php
include("connect.php");
if($_GET['id'] and $_GET['data'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
if(mysql_query("update characters set $key='$data' where id='$id'"))
echo 'success';
}
?>
So does anybody know how I can transfer the chosen dropdown-value (class -> xedit2) to SQL table?
Hope you can help!

Not sure exacly how x-editable works
But in first look i think that the type of your ajax should be "POST" if you want to update some data. And in my opinion you have syntax error in your sql query near "$key"

Warning alert on datatables & tabletools

I'm making a table, using the jQuery library (DataTables), and wanted to add buttons to export the results of the table to an Excel file, then lead me by the example that this page, and get them exported, but I now send an alert when the page loads, I've been reading on the internet and say it manages modifying some lines and states within the scripts, but I could not fix it,when i open the page, it showme the next error:
DataTables warning (table id = 'example'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or
see the docs for bRetrieve and bDestroy
I call my scripts by the next form:
index.php
<meta charset="utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<link href="css/cuerpo.css" rel="stylesheet" type="text/css" />
<!--Prueba-->
<style type="text/css" title="currentStyle">
#import "css/demo_page.css";
#import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
</head>
<body id="dt_example">
<div id="container">
<div id="header">
</div>
<div id="intro">
<header id="titulo">
</header>
<div id="demo">
<article id="contenido"></article>
<br><br>
</div>
</div>
</body>
and it call a JS page:
$(document).ready(function(){
verlistado()
//se carga la lista de la consulta
})
function verlistado(){ //funcion para mostrar el listado en el index por jquery
var randomnumber=Math.random()*11;
$.post("Registro/lista_base.php", {
randomnumber:randomnumber
}, function(data){
$("#contenido").html(data);
});
}
after it use the jQuery library and print on a php data table:
$(document).ready(function(){
$('#example').dataTable( { //convertimos nuestro listado de la forma del jquery.datatables- pasamos el id de la tabla
"sPaginationType": "full_numbers" //damos formato a la paginacion(numeros)
} );
})
<!--Prueba-->
<style type="text/css" title="currentStyle">
#import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
<script language="JavaScript" type="text/javascript">
function PopWindow(idUsuario)
{
window.open('Registro/detalle.php?id='+idUsuario,'Registo del alumno','width=420, height=350');
}
</script>
<script type="text/javascript" language="javascript" src="js/listado.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$('[rel=tooltip]').bind('mouseover', function()
{
if ($(this).hasClass('ajax'))
{
var ajax = $(this).attr('ajax');
$.get(ajax,
function(theMessage)
{
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');});
}
else{
var theMessage = $(this).attr('content');
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
}
$(this).bind('mousemove', function(e)
{
$('div.tooltip').css
({
'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
'left': e.pageX + 15
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
</script>
<style>
.tooltip
{
position:absolute;
width:250px;
background-image:url(images/tip-bg.png);
background-position:left center;
background-repeat:no-repeat;
color:#FFF;
padding:5px 5px 5px 18px;
font: Verdana, Geneva, sans-serif;
font-size:12px;
}
li
{
margin-bottom:30px;
}
#wrapper
{
margin:0 auto;
width:500px;
margin-top: 99px;
}
</style>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Instituto</th>
<th>Categoria</th>
<th>Version</th>
<th width="20%">Nombre</th>
<th>Nacionalidad</th>
<th>email</th>
<th>Puntaje</th>
<th>Comprobante</th>
<th width='1%'>Detalles</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<?php
while($reg= mysql_fetch_array($listado))
{
echo '<tr>';
echo '<td><center>'.mb_convert_encoding($reg['razon_comercial'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['categoria'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['version'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['Nombre'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['nacionalidad'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['email'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['calificacion'], "UTF-8").'</center></td>';
echo "<td><center><a href='".mb_convert_encoding($reg['comprobante'], 'UTF-8')."'</a>descargar</center></td>";
echo "<td><a href=javascript:PopWindow(".mb_convert_encoding($reg['idAlumno'], 'UTF-8').") alt=Image Tooltip rel=tooltip content='
<div id=con><b>Nombre: </b>".mb_convert_encoding($reg['Nombre'], "UTF-8")."<br>
<b>Nacionalidad: </b>".mb_convert_encoding($reg['nacionalidad'], "UTF-8")."<br>
<b>Correo: </b>".mb_convert_encoding($reg['email'], "UTF-8")."<br>
<b>Instituto: </b>".mb_convert_encoding($reg['razon_comercial'], "UTF-8")."<br>
<b>Puntaje: </b>".mb_convert_encoding($reg['calificacion'], "UTF-8")."<br>
<b>Categoria: </b>".mb_convert_encoding($reg['categoria'], "UTF-8")."<br>
<b>Versión: </b>".mb_convert_encoding($reg['version'], "UTF-8")."</div>'><center><img src='images/detail.png' width='20%'></center></a><br></td>";
echo '</tr>';
}
?>
</tbody>
</table>
I hope you can help me.

I think the problem you're having is that the javascript is firing before the data is loaded. To get around this make sure the script is located BELOW the table that is being populated.

You are calling a dataTable against #example twice on the same page which will throw the "DataTables warning (table id = 'example'): Cannot reinitialise DataTable" error

Previous answer is correct, but, if you want to add the export buttons, you also need the flash path.
sSwfPath: "/swf/copy_csv_xls_pdf.swf",

JQuery Tab Events Triggers

I want to see tab No. 2 when "IF Condition" will meet the requirements. Here is my code. Please advice me how can I do this.
Thanks
Shahid
<?php
//Authorization / Security
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="../javascript/jquery/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
alert('main');
$("#container").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
}
}
});
});
</script>
<?php
if($_GET['action'] == "add")
{
////////////////// Trigger Tab No. 2 ////////////////
///////////////// and ///////////////
//////////////// change url of Tab 3 ///////////////
}
?>
</head>
<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><?php include("../includes/headerone.php");?></td>
</tr>
<tr>
<td width="15%"><?php include("../includes/leftbar.php");?></td>
<td width="83%" ><div id="container">
<ul class="tabs-nav">
<li><span>Add</span></li>
<li><span>Edit</span></li>
<li><span>View</span></li>
</ul>
</div></td>
</tr>
<tr>
<td colspan="2"><?php include("../includes/footer.php");?></td>
</tr>
</table>
</body>
</html>

Try your script tag like this, it adds javascript to do what you want by echoing it into the self calling anonymous function if the php condition is met
<script type="text/javascript">
$(function() {
alert('main');
$("#container").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
}
}
});
<?php
if($_GET['action'] == "add"){
echo "$('.tabs-nav li a:eq(1)').trigger('click');";
echo "$('.tabs-nav li a:eq(2)').attr('href', 'newurl');";
}
?>
});
</script>

Categories