Встроенное редактирование jQuery DataTable

Я пытался реализовать простое встроенное редактирование в jQuery Datatable. Но я не могу активировать редактирование, которое происходит при щелчке по ячейке строки. Я использовал тот же код, что и на их сайте Ссылка:

<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display">
    <thead>
        <tr>
            <th>Age</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

Datatable Binding:

    /* Init DataTables */
    var oTable = $('#Datatable').dataTable({
        "bProcessing": true,
        "sAjaxSource":"http://localhost:6220/DataSources/WCF/Data.svc/GetCustomer",
        "aoColumns": [
                            { "mDataProp": "Age" },
                            { "mDataProp": "Name" }
                     ]
    });

/* Apply the jEditable handlers to the table */              oTable.$('td').editable('http://localhost:6220/DataSources/WCF/Data.svc/SaveCustomer', {
                    tooltip: 'Click to edit...',
                    "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%"
            });

Любые предложения приветствуются.


jquery datatables inline-editing
person lbrahim    schedule 29.04.2013    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Я создал плагин, который сделает это за вас примерно в двух строчках кода. Он небольшой и довольно простой, но выполняет свою работу. Репо находится здесь: подключаемый модуль DataTables CellEdit

Базовая инициализация выполняется быстро и легко:

oTable.MakeCellsEditable({
    "onUpdate": myCallbackFunction
});

myCallbackFunction = function (updatedCell, updatedRow) {
    console.log("The new value for the cell is: " + updatedCell.data());
}

Обновление. За последние несколько месяцев этот показатель медленно рос, и в нем гораздо больше возможностей, чем когда я впервые опубликовал этот ответ. Спасибо всем участникам!

person Elliott    schedule 28.03.2016
comment
ваш плагин хорош, но недостаточно абстрактен, слишком мало того, что можно настроить. - person ROROROOROROR; 27.06.2016
comment
Спасибо, я всегда рад принимать запросы функций на странице github (или еще лучше pull request! :-)) - person Elliott; 27.06.2016
comment
Выглядит отлично, но мне также нужна возможность добавлять новые записи - person Connie DeCinko; 29.06.2016
comment
Мне нравится плагин, но да, определенно хотелось бы, чтобы в настройках также были добавлены новые параметры строки / удаления строки. - person Ksofiac; 19.01.2018