Jquery Datatables MakeEditable选择/删除错误

时间:2014-03-18 01:37:45

标签: jquery html ajax twitter-bootstrap datatables

我正在使用由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

任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:7)

嗯,让它在这个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&gt; = 1.7,请使用我的修补版本的jquery.datables.editable.js并尝试使用它。

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

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

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

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