Блог

Главная - Вопросы по программированию - Как добавить пользовательские столбцы в datatable?

Как добавить пользовательские столбцы в datatable?

#ruby-on-rails #datatables #jquery-datatables-rails

#ruby-on-rails #таблицы данных #jquery-datatables-rails

Вопрос:

Я использую

 gem 'jquery-datatables-rails', '3.4.0'
gem 'ajax-datatables-rails'

Моя таблица данных выглядит следующим образом
введите описание изображения здесь

Мой CoffeeScript для этой таблицы выглядит так

 # Datatables
$ ->
  table = $('#qr-submissions-table').dataTable
    dom: 'C<"clear">lfrtip'
    processing: true
    serverSide: true
    ajax: $('#qr-submissions-table').data('source')    
    pagingType: 'full_numbers'
    columns: [
      {data: 'custom_columns'}
      {data: 'delivery_number' }
      {data: 'qpi_department' }     
      {data: 'qr_client' }
      {data: 'date_submitted'}
      {data: 'bay_number' }
      {data: 'submitted_by'}
      {data: 'delivery_note'}
      {data: 'ops' }
    ]
    "order": [[ 3, "desc" ]]
    columnDefs: [
      { "orderable": false, "targets": [3, 7, 8]}, 
      {"targets": 1, visible: ($("#delivery_number_show").val() == 'true')}, 
      {"targets": 2, visible: ($("#division_show").val() == 'true')}, 
      {"targets": 3, visible: ($("#client_show").val() == 'true')}, 
      {"targets": 4, visible: ($("#scan_time_show").val() == 'true')}, 
      {"targets": 5, visible: ($("#delivery_location_show").val() == 'true')}
      {"targets": 6, visible: ($("#submitted_by_show").val() == 'true')}, 
      {"targets": 7, visible: ($("#delivery_note_show").val() == 'true')}, 
      {"targets": 8, visible: ($("#photo_show").val() == 'true')}, 
   
    ]

Здесь поле пользовательского столбца имеет вид хэша '{ "name1" : "value1", "name2" : "value2" }' .. Как я могу отобразить это в виде имен и значений coulm. name1 и name2 будут заголовками столбцов, а value1 и value2 будут соответствующими значениями строк.каждая строка имеет разные значения для ‘value1’ и ‘value2’. Есть ли какой-либо способ сделать это? Пожалуйста, помогите?

Комментарии:

1. Добро пожаловать в stackoverflow. Пожалуйста, не используйте скриншоты обычного текста, такого как код и сообщения журнала. Они трудны для чтения и не могут быть проиндексированы поисковыми системами. И самое главное, люди не могут скопировать ваш код в свои ответы.

Ответ №1:

К сожалению, я не знаю Ruby-on-rails, но я знаю таблицы данных jQuery.

Если ваш ответ JSON выглядит следующим образом:

 [{ "Id": "1", "Name": [{ "FirstName": "Tiger", "LastName": "Nixon"}], "Position": "System Architect", "Office": "Edinburgh", "Age": 61 },
{ "Id": "2", "Name": [{ "FirstName": "Garrett", "LastName": "Winters"}], "Position": "Accountant", "Office": "Tokyo", "Age": 63 },
{ "Id": "3", "Name": [{ "FirstName": "Ashton", "LastName": "Cox"}], "Position": "Jr. Technical Author", "Office": "San Francisco", "Age": 66 }];

И название ваших столбцов будет исправлено (в вашем примере: «name1» и «name2»), вы можете сделать что-то вроде этого (я предоставлю вам 2 способа достижения этого в том же примере):

 var jsonData = [ 
    { "Id": "1", "Name": [{ "FirstName": "Tiger", "LastName": "Nixon"}], "Position": "System Architect", "Office": "Edinburgh", "Age": 61 },
  { "Id": "2", "Name": [{ "FirstName": "Garrett", "LastName": "Winters"}], "Position": "Accountant", "Office": "Tokyo", "Age": 63 },
  { "Id": "3", "Name": [{ "FirstName": "Ashton", "LastName": "Cox"}], "Position": "Jr. Technical Author", "Office": "San Francisco", "Age": 66 }];

var table = $('#example').DataTable({
  LengthChange: false,
  data: jsonData,
  columns: [
      { data: 'Id'},
      { data: 'Name[0].FirstName' }, // 1st Way
      { 
         data: null,
         title: "LastName",
         render: function(data, type, full, meta) { // 2nd Way
            return data.Name[0].LastName;
         }
      },
      { data: 'Position' },
      { data: 'Office' },
      { data: 'Age' }
    ]
});  
 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="table display" style="width:100%">
  <thead>
  <tr>
      <th>Id</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
</table>

Примечание: в этом случае я пытаюсь эмулировать ваше пользовательское поле столбца с именем ключа

Но, если ваши столбцы будут динамическими (имена могут меняться), вам нужно будет сделать что-то вроде этого: Пример