MemoryRefresh!

Datatable



Questions Answers 0%

Pages   0 from 18
Questions   0 from 23

Reset




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "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>
Questions

Related pages

Each !
Object !
Each break !
Json decode !
Split string !
Global variable !
Datatable !
Array !


0% 100%
 
 
0 pages 18 pages
No questions


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "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>



More from Jquery

Attributes
Data
Effects
Window
Element
Basics
Ajax
Form
Uncategorized


More from Programming

Php
jQuery




Powered by minte9.com