Jquery Datatables MakeEditable 选择/删除错误

Question

我正在处理一个由 HTML 和 sAjaxSource 组成的数据表，然后应用 MakeEditable 对其进行编辑。但是遇到一个问题是加载数据表时显示错误(结果集中只有一行，所以不确定这是否可能是什么)。

这是我得到的错误:

TypeError: 'undefined' is not a function (evaluating '$(".table-action-deletelink", oTable).live')

这是我的 HTML 代码，它在 Bootstrap 选项卡中。

<button id="btnDeleteRow">Delete</button>
          <div class="tab-pane fade in active" id="info">
            <p>
                <table id="user_info_table">
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>E-mail Address</th>

                            </tr>
                        </thead>

                </table>
            </p>
          </div>

这是数据表:

var oTable2 = $('#user_info_table').dataTable({
            "fnRowCallback": function( nRow, aaData, iDisplayIndex, iDisplayIndexFull) {
                  $(nRow).attr("id",aaData.id);
                  return nRow;
             },
        "bDestroy": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bDeferRender": true,
        "sPaginationType": "full_numbers",
        "sAjaxSource": '/info/user_info_data/' + sData['id'],
        "aoColumns": [
            { "mData": "id", "sName": "user_id"},
            { "mData": "first_name", "sName": "first_name"},
            { "mData": "last_name", "sName": "last_name" },
            { "mData": "email", "sName": "email" },
        ],
             "fnInitComplete": function() {
                    this.fnAdjustColumnSizing(true);

                    },

        }).makeEditable({
            sUpdateURL: "/info/update_ajax/",
            sDeleteURL: "/info/delete_ajax/",
            fnOnCellUpdated: function(){

            }
        });

这是来自 AJAX 调用的 JSON 响应:

{"aaData":[{"id":"5","first_name":"John","last_name":"Lee","email":"jlee@yahoo.com"}]}

我可以看到正在显示的数据表上的数据，但它一出现就在控制台中显示该错误。我调查了一下，发现它正在寻找一个名为 .table-action-deletelink 的类，这是用于内联删除，但我不想要这样创建的按钮。 https://code.google.com/p/jquery-datatables-editable/wiki/DeleteRecord

如有任何帮助，我们将不胜感激。

Answer 1

嗯，让它在这个 Plunker 中工作.

我唯一更改的是 jquery.datatables.editable.js 中的 .live 事件处理程序到 .on，因为它们自 jquery 1.7 以来已被弃用。

所以我把所有的三个场合都变成了

$(".table-action-editlink", oTable).live("click", function (...

到:

$(".table-action-editlink", oTable).on("click", function (...

也许这是给您的错误，因为它与您的错误消息直接相关。

如果您使用的是 jquery >= 1.7，请使用我从 plunker 中修补的 jquery.datables.editable.js 版本并尝试一下。

呃，忘了:当然，实际的更新/删除 ajax 调用在这个 plunker 中不起作用，因为我不能在那里进行服务器端处理:-)

更新: 如果您想突出显示所选行，请将其添加到 style.css:

table.dataTable tr.row_selected {
  background-color: #C9DDE1;
}

请注意，这可能会与其他 css 定义冲突。