Как добавить кнопку в каждой строке в datatable?

Ответ 1

В принципе, ваш код в порядке, это правильный способ сделать это. Во всяком случае, есть некоторые недоразумения:

• fetchUserData.cfm не содержит пары ключ/значение. Поэтому не имеет смысла обращаться к ключам в mData. Просто используйте mData[index]

• dataTables ожидает дополнительную информацию с вашего сервера. По крайней мере, вы должны указать количество данных, сколько всего элементов на вашем сервере и сколько фильтров. Я просто запрограммировал эту информацию на ваши данные. Вы должны получить правильные значения из подсчетов на сервере script.

  {
   "iTotalRecords":"6",
   "iTotalDisplayRecords":"6",
    "aaData": [
  [
      "1",
      "sameek",
      "sam",
      "sam",
      "[email protected]",
      "1",
      ""
  ],...
  

• Если у вас есть имена столбцов, уже установленные в html-части, вам не нужно добавлять sTitle.

• Функция mRender принимает три параметра:

  • data = Данные для этой ячейки, как определено в mData​​li >
  • type = Тип данных (может быть проигнорирован в основном)
  • full = Полный массив данных для этой строки.

Итак, ваша функция mRender должна выглядеть так:

  "mRender": function(data, type, full) {
    return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
  }

Найдите рабочий Plunker здесь

Ответ 2

посмотрите здесь... это было очень полезно для меня https://datatables.net/examples/ajax/null_data_source.html

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]
} );

$('#example tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] +" salary is: "+ data[ 5 ] );
    } );
} );

Ответ 3

var table =$('#example').DataTable( {
    data: yourdata ,
    columns: [
        { data: "id" },
        { data: "name" },
        { data: "parent" },
        { data: "date" },

        {data: "id" , render : function ( data, type, row, meta ) {
              return type === 'display'  ?
                '<a href="<?php echo $delete_url;?>'+ data +'" ><i class="fe fe-delete"></i></a>' :
                data;
            }},
    ],
    }
}

Ответ 4

Я помогаю своими настройками для кнопок: просматривать, редактировать и удалять. В последнем столбце есть данные: null В конце со свойством defaultContent добавляется строка этого HTML-кода. И поскольку это последний столбец, он указывается индексом -1 посредством свойства target при указании столбцов.

//...
columns: [
    { title: "", "data": null, defaultContent: '' }, //Si pone da error al cambiar de paginas la columna index con numero de fila
    { title: "Id", "data": "id", defaultContent: '', "visible":false },
    { title: "Nombre", "data": "nombre" },
    { title: "Apellido", "data": "apellido" },
    { title: "Documento", "data": "tipo_documento.siglas" },
    { title: "Numero", "data": "numero_documento" },
    { title: "Fec.Nac.", format: 'dd/mm/yyyy', "data": "fecha_nacimiento"}, //formato
    { title: "Teléfono", "data": "telefono1" },
    { title: "Email", "data": "email1" }
    , { title: "", "data": null }
],
columnDefs: [
    {
        "searchable": false,
        "orderable": false,
        "targets": 0
    },
    { 
      width: '3%', 
      targets: 0  //la primer columna tendra una anchura del  20% de la tabla
    },
    {
        targets: -1, //-1 es la ultima columna y 0 la primera
        data: null,
        defaultContent: '<div class="btn-group"> <button type="button" class="btn btn-info btn-xs dt-view" style="margin-right:16px;"><span class="glyphicon glyphicon-eye-open glyphicon-info-sign" aria-hidden="true"></span></button>  <button type="button" class="btn btn-primary btn-xs dt-edit" style="margin-right:16px;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button><button type="button" class="btn btn-danger btn-xs dt-delete"><span class="glyphicon glyphicon-remove glyphicon-trash" aria-hidden="true"></span></button></div>'
    },
    { orderable: false, searchable: false, targets: -1 } //Ultima columna no ordenable para botones
], 
//...

введите описание изображения здесь

Ответ 5

мой рецепт:

декларация с датой:

defaultContent: "<button type='button'....

События:

$('#usersDataTable tbody').on( 'click', '.delete-user-btn', function () { var user_data = table.row( $(this).parents('tr') ).data(); }

Ответ 6

Это решение не работает при использовании адаптивных данных

Ответ 7

ну, я только что добавил button в данные. Например, я должен написать так:

$(target).DataTable().row.add(message).draw()

И в message я добавил такую кнопку: [blah, blah ... "<button>Click!</button>"] и... это работает!