无法获取删除按钮以处理数据表表

时间:2018-05-23 20:07:13

标签: datatables delete-row

我成功创建了一个没有任何问题的待办事项列表。但是,我尝试进一步调整应用程序以显示所有待办事项的表格。

除删除部分外,一切都很好。

我现在有2个jQuery函数来监听delete keypress(一个用于列表,一个用于表):

// ============= Remove todo from the list and Database ============
$('.list').on('click', 'span', function(e){
  e.stopPropagation();
  removeTodo($(this).parent());  // Remove todo from the list and 
  Database
})


// ============== Remove todo from the table and Database ==========
  $('tbody').on('click', '.btn-danger', function(e){
    e.stopPropagation();
    table                         // remove row from table - Start
    .row($(this).parents('tr'))   // ...
    .remove()                     // ... 
    .draw()                       // remove row from table - End

    removeOnt($(this).parent());  // Remove from database -  HOWEVER, NOT WORKING
  })

然后我有删除待办事项的功能:

function removeTodo(todo){
  var clickedId = todo.data('id');             // I know the problem with removing the data from the database when I call the function from the table jQuery call, doesn't work
  var deleteUrl = '/api/todos/' + clickedId; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

通过Table调用从数据库中删除条目的功能的问题是因为“ var clickedId = todo.data('id'); ”是“ undefined ”。

来自 todo.data('id')的上述数据('id')被定义为“addTodo(todo){}”函数为< / p>

var newTodo = $('<li class="task">'+todo.name +' <span>X</span></li>');
newTodo.data('id', todo._id);

这是创建表格行的函数的代码:

function addTodoRow(todo){
  table.row.add([
            todo.name,
            todo.created_date,
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

我的问题是:如何在“ addTodoRow(todo)中定义” newTodo.data('id',todo._id); “的等价物“我们为” addTodo(todo)“做了什么?

感谢任何帮助。

提前致谢。

斯蒂芬

2 个答案:

答案 0 :(得分:0)

我检查了你的JS代码,将行添加到数据表中,

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

以下是我的建议,

- &GT;就像你传递 todo.name,todo.created_date 的值一样。

- &GT;传递您的记录的值是数据库。喜欢 todo.db_record_id

- &GT;并在按钮中更改以下内容,新的JS将为

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button onclick='removeTodo(+todo.db_record_id+)' type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

- &GT;更新JS函数以删除记录,

function removeTodo(todo_id){
  console.log(todo.name);
  var deleteUrl = '/api/todos/' + todo_id; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

尝试以上步骤。希望这会对你有所帮助。

答案 1 :(得分:0)

我找到了一个找到值的工作,并调用delete函数来成功删除行和mongodb记录。

代码调整如下:

  1. 添加了另一项功能:
  2. &#13;
    &#13;
    function removeTodo2(todo_id){
      var deleteUrl = '/api/todos/' + todo_id; 
      $.ajax({
        method: 'DELETE',
        url: deleteUrl
      })
      .then(function(data){
        console.log(data)
      })
      .catch(function(err){
        console.log(err);
      })
    }
    &#13;
    &#13;
    &#13;

    1. jQuery监听器已更新为在单击删除按钮时侦听并从行中提取所需的值,以便将其传递到删除功能(removeTodo2(todo_id))以删除mongodb记录。 P,多么满口。
    2. &#13;
      &#13;
      //Remove todo from the table and Database
        $('tbody').on('click', '.btn-danger', function(e){
          var test = $(this).parents('tr');
          var test2 = test.find('td:eq(2)')[0].innerHTML;  // Find the mongodb record ID.  Note, for the purpose of this exercise the ID as been added to the row, but would not be done in reality. 
          e.stopPropagation();
          table                         // remove row from table - Start
          .row($(this).parents('tr'))   // ...
          .remove()                     // ... 
          .draw()                       // remove row from table - End
          removeTodo2(test2);  // Remove from database -  HOWEVER, NOT WORKING
        })
      &#13;
      &#13;
      &#13;

      这符合我的目的,但我不认为这是正确的做法。

      感谢所有帮助@Sunil Dora