DataTables Редактируемые Удалить

Я добавил DataTables Editable в свою таблицу, чтобы иметь возможность добавлять и удалять некоторые строки. Часть добавления работает отлично, но у меня возникли проблемы с частью удаления, потому что я не могу выбрать строки.

Судя по тому, что я видел в примере, все, что мне нужно сделать, это добавить URL-адрес удаления, что-то вроде этого:

.makeEditable({sDeleteURL: "/DeleteURL"});

Но это не делает мои строки доступными для выбора, поэтому я могу ничего не удалять.

Мой полный код:

$(function () {
    var oTable = $('[email protected]').dataTable(
        {
            "oLanguage": { "sUrl": "/LanguageURL" },
            "bProcessing": true,
            "bFilter": false,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "bLengthChange": false,
            "aoColumnDefs": [{ "sClass": "center-col", "aTargets": ['align-center-col'] },
                { "sClass": "read_only", "aTargets": ['read-only-col'] },
                { "sClass": "small-width-col", "aTargets": ['small-col'] }],
            "aaSorting": [[0, "desc"]],
            "bScrollCollapse": true,
            "bServerSide": true,
            "sAjaxSource": '/DataURL',
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "Numero", "value": $(this).find("#Numero").val() });
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            }
        }).makeEditable({
            sAddNewRowFormId: '[email protected]',
            sAddNewRowButtonId: '[email protected]',
            btnDeleteRow: '[email protected]',
            sAddURL: "/AddURL",
            sDeleteURL: "/DeleteURL"
        });
});

jquery datatables jeditable
person bmccruz    schedule 02.01.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я лично пытался заставить функцию удаления datatables работать для одного из моих проектов.

Я обнаружил, что мне нужно включить сценарий jquery-ui.js в заголовок документа.

Я также обнаружил, что вам нужно отформатировать строки таблицы следующим образом. <tr id="1">, чтобы таблицы данных могли автоматически получить правильный идентификатор # из выбранной строки и передать его на вашу php-страницу для дальнейшей обработки.

Таблицы данных могут автоматически добавлять идентификатор к каждой строке таблицы с помощью специального свойства DT_RowId.

Если вы настроили таблицы данных для использования реализации на стороне сервера, вы можете включить DT_RowId в данные JSON, возвращаемые с сервера в ответ на запрос ajax.

Например формат JSON:

{ 
 "sEcho": 1,
 "iTotalRecords": "1",
 "iTotalDisplayRecords": "1",
 "aaData": [
  {
    "DT_RowId": "1",
    "engine": "Trident",
    "browser": "Internet Explorer 4.0",
    "platform": "Win 95+",
"version": "4",
    "grade": "X"
  }
 ]
}

Вот мой пример кода мокапа. Реализация на стороне сервера не включена в этот пример. Я просто использую в качестве примера исходный файл objects.txt, который поставляется с таблицами данных.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
  <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="datatables/media/js/jquery.dataTables.js"></script> 
    <script src="examples/examples_support/jquery.jeditable.js"></script> 
    <script src="http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery-ui.js"></script> 
    <script src="datatables/media/js/jquery.datatables.editable.js"></script> 
    <style type="text/css">
        @import "datatables/media/css/demo_table.css";
        @import "datatables/media/css/demo_table_jui.css";
        @import "examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style> 
    <script> 
        $(document).ready(function() {
            var anOpen = [];
            var sImageUrl = "/datatables/examples/examples_support/";

            var oTable = $('#example').dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true,
                "bProcessing": true,
                "sAjaxSource": "/datatables/examples/ajax/sources/objects.txt",
                "aoColumns": 
                [
                    {
                       "mDataProp": null,
                       "sClass": "control center",
                       "sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
                    },
                    { "mDataProp": "engine" },
                    { "mDataProp": "browser" },
                    { "mDataProp": "grade" }
                ]
            }).makeEditable({
                sDeleteURL: "DeleteData.php",
                //Converts to JQuery UI button (full list of options on http://jqueryui.com/demos/button)
                oDeleteRowButtonOptions:
                {
                    label: "Remove",
                    icons: {primary:'ui-icon-trash'}
                },
                //Additional Paramaters can be sent for processing...
                oDeleteParameters:
                {
                    action:"delete_dt_projects_record",
                    dtSecurity:"9999999999"
                }
            });
            //For Expandable Collapsible Rows
            $('#example td.control').live( 'click', function () {

                var nTr = this.parentNode;
                //var projID = $(this).closest("td").next().text();
                //console.log(projID);
                //console.log(anOpen);
                //console.log(nTr);
                var i = $.inArray( nTr, anOpen );
                //console.log(i);
                if ( i === -1 ) 
                {
                    $('img', this).attr( 'src', sImageUrl+"details_close.png" );
                    var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                    $('div.innerDetails', nDetailsRow).slideDown();

                    anOpen.push( nTr );
                }
                else 
                {
                $('img', this).attr( 'src', sImageUrl+"details_open.png" );
                $('div.innerDetails', $(nTr).next()[0]).slideUp( function () 
                    {
                        oTable.fnClose( nTr );
                        anOpen.splice( i, 1 );
                    });
                }
            });
            function fnFormatDetails( oTable, nTr )
            {
              var oData = oTable.fnGetData( nTr );
              var sOut =
                '<div class="innerDetails">'+
                  '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                    '<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
                    '<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
                    '<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
                    '<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
                    '<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
                  '</table>'+
                '</div>';
              return sOut;
            }
        });

    </script> 
  </head> 
  <body> 
    <div style="width:900px">
    <div class="add_delete_toolbar">
        <button id="btnDeleteRow">Delete</button>
    </div>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th></th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody></tbody>
    </table>
    </div> 
  </body> 
</html>

ПРИМЕЧАНИЕ. Возможно, вам придется изменить URL-адреса сценариев и стилей на свои, чтобы увидеть рабочий пример.

Обновление: вам также необходимо вручную включить это в любом месте вашего источника HTML.

<button id="btnDeleteRow">Delete</button>
person Grimsmith    schedule 04.04.2012