JQuery DataTables - Как добавить редактировать и удалять опции

Question

У меня есть следующий код: http://jsfiddle.net/5ooyertu/1/

Прямо сейчас, таблица заселяется должным образом с помощью стороны сервера, и моя пейджинговой работы. Но я хотел бы добавить возможность удаления и редактирования строки. Я хотел бы добавить столбец «Действия», который имеет два - один для метода редактирования ..., а другой - метод удаления.

Прежде чем использовать dataTables, у меня была некоторая логика JavaScript, которая будет перебирать массив записей из Ajax, вызывать и заполнять обычную таблицу данными и соответствующими гиперссылками.

for (var i=0; i < data.length; i++) { 
    if (data[i].grp == 0) { 
    tr.append("<a href='add.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>"); 
    tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ");'>Delete</button></td>") 

} else { 
    tr.append("<a href='update_group.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>"); 
    tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ",true);'>Delete</button></td>") 
    } 
} 

Как видно из приведенного выше примера кода, в моих гиперссылка, мне нужно пройти несколько кусков данных из каждой строки, либо как часть строки запроса (в случае редактирования) или просто передайте их как параметры в другую функцию JavaScript, называемую «delete», которая живет в том же файле, что и этот dataTable. И это условно ... то есть гиперссылки будут меняться в зависимости от того, является ли grp истинным/ложным.

Мне интересно, как я могу изменить логику, которая заполняет dataTable, чтобы включить эти две гиперссылки?

Я нашел эту ссылку: http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# Но код не работал для меня, и я думаю, что где-то читал, что метод fnRender устарел.

Если у вас есть предложения, я был бы признателен.

EDIT 1

Я попытался изменить свой код, чтобы выглядеть следующим образом:

$(document).ready(function() { 
    var selected = []; 
    $('#users').DataTable({ 

     "serverSide": true, 
     "ordering": false, 
     aLengthMenu: [ 
       [10, 25, 50, 100, "-1"], 
       [10, 25, 50, 100, "All"] 
     ], 
     "ajax": "/cgi-bin/test", 
     "rowCallback": function(row, data) { 
      if ($.inArray(data.DT_RowId, selected) !== -1) { 
       $(row).addClass('selected'); 
      } 
     }, 
     "columns": 
     [  
       { "data": "id" ,"searchable":false}, 
       { "data": "name","searchable":true},  
       { "data": "pid", "searchable":true },  
       { "data": "destination", "searchable":true }, 
       {"mRender": function (data, type, row) { 
         return '<a href=add.html?id="'+row[0]+'">Edit</a>';} 
       } 
     ] 
    }); 

}); 

Обратите внимание на ссылки вызова для отображения. Я также добавил новый столбец в таблицу в свой html-код. Я получаю гиперссылку! Но, к сожалению, ссылка неверна. строка [0] возвращает «undefined». Кроме того, я до сих пор не знаю, как изменить гиперссылку, которую я создаю, в зависимости от значения поля «destination». Так, например, я хочу сделать что-то вроде этого: (псевдокод)

if row[i].destination = 'Group' then 
        {"mRender": function (data, type, row) { 
          return '<a href=group.html?id="'+row[0]+'">Edit</a>';} 
        } 
else 
        {"mRender": function (data, type, row) { 
          return '<a href=add.html?id="'+row[0]+'">Edit</a>';} 
        } 
end 

EDIT 2

Этот код, кажется, работает:

$ (документ) .ready (функция () { вар выбран = [];. $ ('#') пользователей DataTable ({

 "serverSide": true, 
     "ordering": false, 
     aLengthMenu: [ 
       [10, 25, 50, 100, "-1"], 
       [10, 25, 50, 100, "All"] 
     ], 
     "ajax": "/cgi-bin/test", 
     "rowCallback": function(row, data) { 
      if ($.inArray(data.DT_RowId, selected) !== -1) { 
       $(row).addClass('selected'); 
      } 
     }, 
     "columns": 
     [  
       { "data": "id" ,"searchable":false}, 
       { "data": "name","searchable":true},  
       { "data": "pid", "searchable":true },  
       { "data": "destination", "searchable":true }, 
       {"mRender": function (data, type, row) { 
         return '<a href=add.html?id='+row.id+'>Edit</a>';} 
       } 
     ] 
    }); 

нет w Мне просто нужно выяснить, как сделать это условным.

Answer 1

Вот вам пример предполагая следующее: население

• Ajax
• строк данных является массив, содержащий 4 столбца
• В строке данных содержится идентификатор в первом столбце
• Вы не указали ID на столе, чтобы вы его спрятали

Не должно быть трудно адаптировать его к вашим потребностям. Проверьте columns использование

var datatablesOptions = { 
    "serverSide": true, 
    "ajaxSource": '[yourAjaxUrl]', 
    "processing": true, 
    "columns": [ 
     { bVisible = false }, // assume this is the id of the row, so don't show it 
     null, 
     null, 
     null, 
     /* EDIT */ { 
      mRender: function (data, type, row) { 
       return '<a class="table-edit" data-id="' + row[0] + '">EDIT</a>' 
      } 
     } 
     /* DELETE */ { 
      mRender: function (data, type, row) { 
       return '<a class="table-delete" data-id="' + row[0] + '">DELETE</a>' 
      } 
     },    
    ] 
}; 
$('#table').dataTable(datatablesOptions); 

EDIT

В случае, если вам нужно условному оказать что-то другое в зависимости от destination вы могли бы сделать

mRender: function (data, type, row) { 
    if (row.destination == "d1") { 
     return '<a href="destination1?id=' + row.id + '">EDIT</a>' 
    }else (row.destination == "d2"){ 
     return '<a href="destination2?id=' + row.id + '">EDIT</a>' 
    } else { 
     // some error telling that destination value is unexpected 
    } 
} 

Answer 2

DataTables поддерживает операции редактирования и удаления.Удалить довольно просто, как это:

$('#id tbody').on('click', function(){ 
    table 
     .row($(this).parents('tr')) 
     .remove() 
     .draw(); 
}); 

Заканчивать этот пример: https://editor.datatables.net/examples/simple/inTableControls.html

Answer 3

тейк взгляд на мой фрагмент Columns части

columns: [ 
    { 'data': 'LastName' }, 
    { 'data': 'FirstMidName' }, 
    { 'data': 'EnrollmentDate' }, 
    {// this is Actions Column 
     mRender: function (data, type, row) { 
      var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })'; 
      linkEdit = linkEdit.replace("-1", row.ID); 

      var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })'; 
      linkDetails = linkDetails.replace("-1", row.ID); 

      var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })'; 
      linkDelete = linkDelete.replace("-1", row.ID); 

      return linkDetails + " | " + linkEdit + " | " + linkDelete; 
     } 
    } 

, и это отрывок из моего Json

{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…} 

Примечание thate Я использую ASP.Net MVC, так Html.ActionLink просто возвращая ссылку

и результаты