2017-01-11 1 views
0

Как создать ссылку редактирования с функцией, имеющей несколько параметров из столбцов данных, возвращаемых из ajax.Сделать ссылку редактирования на datatable с несколькими значениями столбцов и глобальным поиском по одному/настраиваемому столбцу

Я прочитал об обратном вызове рендеринга, но он получает только одно значение столбца & Мне нужно 2. Мне нужно что-то вроде следующего псевдокода.

"columnDefs": [ { 
      "targets": [0,1], 
      "data": "0,1", 
      "render": function (data, type, full, meta) { 
       return `<a href="javascript:;" onclick="edit(${data[0]}, ${data[1]})"></a>` 
      } 
     } ] 

Поскольку я отключил глобальный поиск по всем столбцам, кроме одного. Я не могу использовать приведенный выше код, который использует свойство target. Я не знаю, как этого добиться, пожалуйста, руководство.

Edit: Полный код

var datatable = $('#datatable').DataTable({ 
     "ajax": "/get_data/", 
     "processing": true, 
     "serverSide": true, 
     "deferRender": true, 

     "columnDefs": [ 
      { "searchable": false, "targets": [ 0,2,3,4,5,6,7,8,9,10,11 ] } 
     ] 
    }); 

ответ

0

я нуждался в ссылку Изменить на первой колонке, поэтому я последовал @ Gyrocode.com ответ и прекрасно работает.

Я также хотел использовать глобальный поиск для поиска, но только на одном столбце. Datatable ColumnDef Documentation дал мне ключ, так что я закончил делать следующее.

Вот полный код:

var datatable = $('#datatable').DataTable({ 
    "ajax": "/get_data/", 
    "processing": true, 
    "serverSide": true, 
    "deferRender": true, 

    "columnDefs": [ 
     { 
      "targets": 0, 
      "render": function (data, type, full, meta) { 
       return '<a href="javascript:;" class="btn-edit">Edit</a>'; 
      } 
     }, 
     { targets: 1, searchable: true }, 
     { targets: '_all', searchable: false } 
    ] 
}); 
1

Вы можете получить доступ к данным строки с помощью full переменной, например full[0] или full[1].

Однако вместо создания ссылок в HTML, я бы получить данные строки в обработчик щелчка, как показано ниже:

$('#example').DataTable({ 
    "columnDefs": [ 
     { 
     "targets": [0, 1],   
     "render": function (data, type, full, meta) { 
      return '<a href="javascript:;" class="btn-edit">Edit</a>'; 
     } 
     } 
    ], 
    // ... other options ... 
}); 

$('#example').on('click', '.btn-edit', function(){ 
    // Get row data 
    var data = $('#example').DataTable().row($(this).closest('tr')).data(); 

    edit(data[0], data[1]); 
}); 
+0

Работает отлично. Благодарю. Но, как уже упоминалось ранее, я отключил глобальный поиск по всем столбцам, кроме одного столбца, используя опцию 'target' и' searchable: false'. Если я использую ваш код, поиск не будет работать так, как мне нужно. Можете ли вы мне помочь? – Bsienn

+0

Может быть, я должен дать ему глобальный поиск в том виде, в каком он есть, и иметь столбец-мудрый поиск по одному столбцу, как работает datatable. – Bsienn

+0

Я нашел решение для чего мне нужно. Я собираюсь отправить свое решение здесь. Большое спасибо. Без вашей помощи я бы не нашел решение. – Bsienn