Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   dataTables + jeditable не получается сделать поля редактируемыми (https://javascript.ru/forum/dom-window/17002-datatables-jeditable-ne-poluchaetsya-sdelat-polya-redaktiruemymi.html)

alekslkta 02.05.2011 15:17

dataTables + jeditable не получается сделать поля редактируемыми
 
Добрый вечер, уважаемые! Очень нуждаюсь в Вашей помощи! Я настроил plug-ini dataTables + jeditable. Чтобы данные отображались из базы данных и была бы потом возможность редактировать поля. Код следующий :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" language="javascript" src="media/js/jquery.jeditable.js"></script>
		<script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                	$('#example').dataTable( {
                		"bProcessing": true,
                		"bServerSide": true,
                		"sAjaxSource": "server_processing.php",
                		"fnServerData": function ( sSource, aoData, fnCallback ) {
                			/* Add some extra data to the sender */
                			aoData.push( { "name": "more_data", "value": "my_value" } );
                			$.getJSON( sSource, aoData, function (json) { 
                				/* Do whatever additional processing you want on the callback, then tell DataTables */
                				fnCallback(json)
                			} );
                		}
                	});
                });
		</script>
        <script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				/* Init DataTables */
				var oTable = $('#example').dataTable();
				
				/* Apply the jEditable handlers to the table */
				$('td', oTable.fnGetNodes()).editable( 'save.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"
				});
			});
		</script>
	</head>
<body id="dt_example">
    <div id="container">
        <div id="dynamic">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            	<thead>
            		<tr>
            			<th width="15%">Token</th>
            			<th width="15%">Value</th>
            		</tr>
            	</thead>
            	<tbody>
            		<tr id="1">
            			<td colspan="5" >Loading data from server</td>
            		</tr>
            	</tbody>
            </table>
        </div>
    </div>
</body>
</html>

Но не получается сделать поля в отображаемой табличке активными для исправления. По отдельности javascripti работают(.dataTable и editable). А вместе не получается настроить. Помогите пожалуйста. Спасибо заранее!


Часовой пояс GMT +3, время: 14:22.