menu from server_side !
menu from server_side !
Please, help me! I don't understand, how create menu from server_side in datatable? Please help me with some example, or maybe some discussion on this forum. My code is :
[code]
<?php
$dbhost = 'localhost';
$dbname = 'pca_project';
$dbuser = 'root';
$dbpasswd = '';
@mysql_connect($dbhost, $dbuser, $dbpasswd) or
die("No connection to the DB");
@mysql_select_db($dbname) or die("DB not selected");
session_start();
//$_SESSION["PageHistory"] = curPageURL();
$Tablename = 'tab_Timerep';
$WorkTable = mysql_query("SELECT rep_id ,p_id, t_id, Mo, Tu, We, Th, Fr, Sa, Su FROM ".$Tablename."") or die(mysql_error());
$row_WorkTable = mysql_fetch_assoc($WorkTable);
$Numfields = count($row_WorkTable);
$Count = 0;
foreach ($row_WorkTable as $key=>$value) {
$arr1[$Count] = $key;
$Count++;
};
$_SESSION["TableView"] = $Tablename;
$_SESSION["TableViewFields"] = $arr1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "media/css/demo_page.css";
@import "media/css/demo_table_jui.css";
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bSortClasses": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "rep_proc.php",
"sScrollY": 440,
"aoColumns": [
/* Browser */ null,
{ "bSearchable": false,
"bVisible": false },
/* Platform */ { "bSearchable": false,
"bVisible": false },
/* Version */ null,
/* Grade */ null,
null,
null,
null,
null,
null],
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},
"fnDrawCallback": function () {
$('td', this.fnGetNodes()).editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
}
}
);
} );
body { font-size: 62.5%; }
div#users-contain { text-align:left; width: 100%; margin: 0px 0; }
div#users-contain table { margin: 0em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: 3px 10px; text-align: left; }
Click to add a new row
Nr
Project
Task
Mo
<?php echo $mo; ?>
Tu
<?php echo $tu; ?>
We
<?php echo $we; ?>
Th
<?php echo $th; ?>
Fr
<?php echo $fr; ?>
Sa
<?php echo $sa; ?>
Su
<?php echo $su; ?>
<?php
$Count = 0;
Do {
print('');
$Count++;
} while ( $Count < $Numfields);
?>
Nr
Project
Task
Mo
Tu
We
Th
Fr
Sa
Su
[/code]
[code]
<?php
$dbhost = 'localhost';
$dbname = 'pca_project';
$dbuser = 'root';
$dbpasswd = '';
@mysql_connect($dbhost, $dbuser, $dbpasswd) or
die("No connection to the DB");
@mysql_select_db($dbname) or die("DB not selected");
session_start();
//$_SESSION["PageHistory"] = curPageURL();
$Tablename = 'tab_Timerep';
$WorkTable = mysql_query("SELECT rep_id ,p_id, t_id, Mo, Tu, We, Th, Fr, Sa, Su FROM ".$Tablename."") or die(mysql_error());
$row_WorkTable = mysql_fetch_assoc($WorkTable);
$Numfields = count($row_WorkTable);
$Count = 0;
foreach ($row_WorkTable as $key=>$value) {
$arr1[$Count] = $key;
$Count++;
};
$_SESSION["TableView"] = $Tablename;
$_SESSION["TableViewFields"] = $arr1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "media/css/demo_page.css";
@import "media/css/demo_table_jui.css";
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bSortClasses": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "rep_proc.php",
"sScrollY": 440,
"aoColumns": [
/* Browser */ null,
{ "bSearchable": false,
"bVisible": false },
/* Platform */ { "bSearchable": false,
"bVisible": false },
/* Version */ null,
/* Grade */ null,
null,
null,
null,
null,
null],
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},
"fnDrawCallback": function () {
$('td', this.fnGetNodes()).editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
}
}
);
} );
body { font-size: 62.5%; }
div#users-contain { text-align:left; width: 100%; margin: 0px 0; }
div#users-contain table { margin: 0em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: 3px 10px; text-align: left; }
Click to add a new row
Nr
Project
Task
Mo
<?php echo $mo; ?>
Tu
<?php echo $tu; ?>
We
<?php echo $we; ?>
Th
<?php echo $th; ?>
Fr
<?php echo $fr; ?>
Sa
<?php echo $sa; ?>
Su
<?php echo $su; ?>
<?php
$Count = 0;
Do {
print('');
$Count++;
} while ( $Count < $Numfields);
?>
Nr
Project
Task
Mo
Tu
We
Th
Fr
Sa
Su
[/code]
This discussion has been closed.
Replies
maybe datatables-editable plugin can help you (http://code.google.com/p/jquery-datatables-editable/). This plugin enhances standard DataTables plugin and adds inline editing features including the select list. See example on the http://jquery-datatables-editable.googlecode.com/svn/trunk/custom-editors.html where you can find inline select list editor in the last column that is generated from the server-side.
thanks
medSwa
Do you want the drop down list to be shown all the time, or just during editing?
editable is good to use if you are just showing the list during editing. when not editing, it will just look like text. when you click (or dbl click) on the cell editable can create a drop down list to constrain the choices of the user.
The google code site shows an example: http://code.google.com/p/jquery-datatables-editable/wiki/CustomCellEditors
[code]
// in aoColumns for the editable initialization
{
type: 'select',
onblur: 'submit',
data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"
}
[/code]
an example is on page http://jquery-datatables-editable.googlecode.com/svn/trunk/custom-editors.html - see the "Engine" column or "CSS Grade" column
by setting "type" to "select and "data" to an object of key/value pairs, you define the drop down list. You can use values from your database at page load time to define the "data" list if you want.
-> when the user selects a value from list there is nothing that happens immediately, there is a separate button to take care of it.
-> i want the list to be shown always not just while editing. so is there some other feature for this. or should i just go ahead and use type: select in the aocolums in the document.ready. if the "data :" can be assigned to an object - i am sending the list embedded in the json string from the server side - how can i access the json string to extract the list (OR) should i use a separate call to server to get the list like they did in the link you gave (http://jquery-datatables-editable.googlecode.com/svn/trunk/custom-editors.html ) -( loadurl: 'EngineVersionList.php',)
thanks again
-medswa
[code]
"aoColumns": [
/* Browser */ null,
{ "bSearchable": false,
"bVisible": false },
/* Platform */ { "bSearchable": false,
"bVisible": false },
/* Version */
{ fnRender: make_version_dropdown }, //fnRender function gets passed oObj
/* Grade */ null,
null,
null,
null,
null,
null],
// and the rest of your initializers
// fnRender functions return a string that will be the content of the rendered cell
function make_version_dropdown (oObj) {
// your dropdown might not use the oObj since you are probably defining your drop-down options
// without needing the data in oObj, which has things like which row, column, and the data for
// this row (iDataRow, iDataColumn, aData, respectively)
//instead, you want to create a string that has the html code for your dropdown list
// you might have already made one and put it in a variable based on PHP read from
// your database, but I'll create a quick one here
var dropdown = ""
dropdown += "1.0";
dropdown += "1.1";
dropdown += "2.0";
dropdown += "";
return dropdown;
}
[/code]
thanks
medswa