Jquery Datatables MakeEditable选择/删除错误

Question

我正在使用由HTML和sAjaxSource构成的数据表,然后应用MakeEditable来编辑它.但是遇到问题的是数据表加载的那一刻它会显示错误(结果集中只有一行,因此不确定是否可能是这样).

这是我得到的错误:

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

这是我的HTML代码,它位于引导选项卡中.

<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

任何帮助将不胜感激thx.

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定义发生冲突.