За последние 24 часа нас посетили 16702 программиста и 1694 робота. Сейчас ищут 865 программистов ...

dataTables + jeditable не получается сделать поля редактируе

Тема в разделе "JavaScript и AJAX", создана пользователем alekslkta, 1 май 2011.

  1. alekslkta

    alekslkta Активный пользователь

    С нами с:
    12 авг 2008
    Сообщения:
    32
    Симпатии:
    0
    Добрый вечер, уважаемые! Очень нуждаюсь в Вашей помощи! Я настроил plug-ini dataTables + jeditable. Чтобы данные отображались из базы данных и была бы потом возможность редактировать поля. Код следующий :
    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    3.     <head>
    4.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    5.         <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
    6.        
    7.         <title>DataTables example</title>
    8.         <style type="text/css" title="currentStyle">
    9.             @import "media/css/demo_page.css";
    10.             @import "media/css/demo_table.css";
    11.         </style>
    12.         <script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
    13.         <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
    14.         <script type="text/javascript" language="javascript" src="media/js/jquery.jeditable.js"></script>
    15.         <script type="text/javascript" charset="utf-8">
    16.                 $(document).ready(function() {
    17.                     $('#example').dataTable( {
    18.                         "bProcessing": true,
    19.                         "bServerSide": true,
    20.                         "sAjaxSource": "server_processing.php",
    21.                         "fnServerData": function ( sSource, aoData, fnCallback ) {
    22.                             /* Add some extra data to the sender */
    23.                             aoData.push( { "name": "more_data", "value": "my_value" } );
    24.                             $.getJSON( sSource, aoData, function (json) {
    25.                                 /* Do whatever additional processing you want on the callback, then tell DataTables */
    26.                                 fnCallback(json)
    27.                             } );
    28.                         }
    29.                     });
    30.                 });
    31.         </script>
    32.         <script type="text/javascript" charset="utf-8">
    33.             $(document).ready(function() {
    34.                 /* Init DataTables */
    35.                 var oTable = $('#example').dataTable();
    36.                
    37.                 /* Apply the jEditable handlers to the table */
    38.                 $('td', oTable.fnGetNodes()).editable( 'save.php', {
    39.                     "callback": function( sValue, y ) {
    40.                         var aPos = oTable.fnGetPosition( this );
    41.                         oTable.fnUpdate( sValue, aPos[0], aPos[1] );
    42.                     },
    43.                     "submitdata": function ( value, settings ) {
    44.                         return {
    45.                             "row_id": this.parentNode.getAttribute('id'),
    46.                             "column": oTable.fnGetPosition( this )[2]
    47.                         };
    48.                     },
    49.                     "height": "14px"
    50.                 });
    51.             });
    52.         </script>
    53.     </head>
    54. <body id="dt_example">
    55.     <div id="container">
    56.         <div id="dynamic">
    57.             <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    58.                 <thead>
    59.                     <tr>
    60.                         <th width="15%">Token</th>
    61.                         <th width="15%">Value</th>
    62.                     </tr>
    63.                 </thead>
    64.                 <tbody>
    65.                     <tr id="1">
    66.                         <td colspan="5" >Loading data from server</td>
    67.                     </tr>
    68.                 </tbody>
    69.             </table>
    70.         </div>
    71.     </div>
    72. </body>
    73. </html>
    74.  
    Но не получается сделать поля в отображаемой табличке активными для исправления. По отдельности javascripti работают(.dataTable и editable). А вместе не получается настроить. Помогите пожалуйста. Спасибо заранее!
     
  2. qwert_ukg

    qwert_ukg Активный пользователь

    С нами с:
    20 июл 2010
    Сообщения:
    387
    Симпатии:
    0
    Адрес:
    Алмата
    а у вас работает "bServerSide": true вместе с fnServerData
     
  3. qwert_ukg

    qwert_ukg Активный пользователь

    С нами с:
    20 июл 2010
    Сообщения:
    387
    Симпатии:
    0
    Адрес:
    Алмата
    fnCallback(json);[/u]