Studyon Minte9.com
jQuery




Datatable



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">' target='_blank'>http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>Projects</title>

<!-- Data Table -->
<link href="DataTables-1.9.4/media/css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="DataTables-1.9.4/media/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="DataTables-1.9.4/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<!-- Editable -->
<script type="text/javascript" language="javascript" src="jquery.jeditable.js"></script>
<script type="text/javascript" charset="utf-8">

	$(document).ready(function() {

		// Data table
		oTable = $('#example').dataTable({
			"bJQueryUI": true,
			"bStateSave": true,
			"sPaginationType": "full_numbers",
			"iDisplayLength": 25,
			"bPaginate": false,
			"aaSorting": [[ 4, "asc" ]]
		});

		setEditable();
	});

	function setEditable() {
		
		// Apply the jEditable handlers to the table
		oTable.$('td:gt(0):lt(11)').editable( 'index.php/projects/ajaxupdate', {
			"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",
			"width": "100%"
		});
	}

</script>
<style>
	body {background-color: #FFFFFF; color: #333333; font: 80%/1.45em "Lucida Grande",Verdana,Arial,Helvetica,sans-serif; padding: 10px 100px 0px 100px;}
	input {border: 1px solid #aaa; width: 200px}
	a.button { border: 1px solid #CCCCCC; color: #666666; display: block; font-size: 12px; margin-left: 3px; margin-top: 15px; padding: 3px 7px; text-align: center; text-decoration: none; width: 80px;}
</style>
</head>
<body>

<br>
<a href='javascript:void(0)' onclick="AddNew();" class='button'>Add New</a><br>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" class="ex_highlight">
	<thead id="tableTop">
		<th align='left'>No</th>
		<th align='left'>Code</th>
		<th align='left'>Description</th>
		<th align='left'>Area</th>
		<th align='left'>Effort</th>
		<th align='left'>Effect</th>
		<th align='left'>Priority</th>
		<th align='left'>Status</th>
		<th align='left'>Details</th>
		<th align='left'>Start Date</th>
		<th align='left'>Target Date</th>
		<th align='left'>End Date</th>
	</thead>
	<tbody>			
			<!--
			<?php if($v->STATUS == "Valid" && !$v->CANT_EXECUTATA): ?>
				<tr class="gradeA" id="row<?php echo $k; ?>">
			<?php elseif($v->CANT_EXECUTATA): ?>
				<tr class="gradeC">
			<?php else: ?>
				<tr class="gradeX">
			<?php endif; ?>
			-->

			<tr class="gradeA" id="row0">
				<td id="NO">1</td>
				<td id="CODE">CLTM</td>
				<td id="DESCRIPTION">Colateral Management (CSA, Repo)</td>
				<td id="AREA">JV</td>
				<td id="EFFORT">high</td>
				<td id="EFFECT">PNB</td>
				<td id="PRIORITY">1</td>
				<td id="STATUS">in progres</td>
				<td id="DETAILS">NULL</td>
				<td id="START_DATE">10.02.2013</td>
				<td id="TARGET_DATE">01.09.2010</td>
				<td id="END_DATE">01.09.2010</td>
			</tr>

	</tbody>
</table>

<script type="text/javascript">

	var nextNo = 2;
	var projectsNo = 2;

	function AddNew() {

		var data = new Array();
		
		// Add new row
		data.push(nextNo++);
		for(i=1; i<11; i++) {
				 data.push("NULL");
		}
		$('#example').dataTable().fnAddData(data);

		// Set cells as editables
		setEditable();
		
		// Add id attr to td cells
		var rows = $('#example').dataTable().fnGetNodes();
		var row = $(rows[projectsNo++]);

		//foreach($fields as $k): ?>
			//row.find("td:eq(" + (i++) +")").attr("id", "<?php echo $k ?>");
		//endforeach; ?>

		$.ajax({
			url: "index.php/projects/ajaxinsert",
			type: "get",
			data: "no=" + (nextNo-1),
			success: function(result) {
				//
			}
		});
	}
	
</script>

<br> * Multiple Sorting (Shift+Click) <br><br>


</body>
</html>