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, время: 02:52. |