Datatables.js с сервлетом Java и кнопкой отправки в строку

Question

Я создаю страницу, на которой я использую DataTables.js для отображения информации, и план состоит в том, чтобы в каждой строке была кнопка отправки, которая отправляет форму с информацией о строке.

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

Итак, теперь в сервлете у меня есть список, который передается от контроллера к сервлету и преобразуется в строку Json с помощью Gson. В консоли при переходе на страницу я могу подтвердить, что строка содержит правильные данные, поскольку я распечатала их в консоли.

Теперь у меня вопрос, как мне использовать этот атрибут, который я устанавливаю, используя req.setAttribute ("allX", allX), чтобы передать его в JSP.

У меня есть тег script в нижней части JSP для заполнения таблицы, которая

<script>
$(document).ready(function () {
    var allx = ${allX}

    $('#allTable').DataTable({
        "data" : allx

    });
});
</script>

Выше в jsp у меня есть тег с идентификатором allTable.

Что мне действительно нужно, так это правильное отображение данных в таблице из строки Json, а затем добавление кнопки отправки в каждую строку, которая передает информацию в строке обратно в сервлет, который на данный момент и, вероятно, будет только когда-либо будет одна точка данных на строку У меня все в порядке с обработкой данных в сервлете и обработкой их для использования в другом месте, только с этими данными таблицы, у меня возникла огромная проблема.

Answer 1

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

Вы хотите отправить массив объектов, чтобы таблицы данных могли правильно его отображать.Каждый элемент в этом массиве будет объектом, описывающим полную строку.Вот пример:

// You can use array of objects. Each object will be a row in the table.
// Compose it on the server or client side and give to DataTables for processing.
// Your objects can have many keys. You can tell DataTables which to use. In this
// example, I use allX.id and allX.type, while ignoring allX.color.
var allX = [
  { id: '0', type: 'pencil', color: 'blue' },
  { id: '1', type: 'pen', color: 'orange' },
  { id: '2', type: 'marker', color: 'black' }
];

var table = $('#allTable').DataTable({

  data: allX, // allX here is our array, which contains the data to display in the table

  columns: [{
      data: 'id',        // object key to look for value
      title: 'ID'        // give a title to your column
    },
    {
      data: 'type',      // our second column description
      title: 'Type'
    },
    {
      width: '30%',      // our buttons column
      orderable: false   // we will describe it further in 'columnDefs'
    },
  ],

  "columnDefs": [{
    "targets": -1,       // -1 = last column
    "data": null,        // no data for this column, instead we will show default content, described in 'defaultContent'
    "defaultContent": "<button id='submit-btn'>Submit</button> <button id='delete-btn'>Delete</button>"
  }],

});

// catch a button click event
$('#allTable').on('click', 'button', function() {
  // create an object from a row data
  var rowData = table.row($(this).parents('tr')).data();
  // fire a function, based on the button id that was clicked
  if (this.id === 'submit-btn') {
    submitData(rowData);
  } else if (this.id === 'delete-btn') {
    deleteData(rowData);
  }
});


function submitData(data) {
  // Process your row data and submit here.
  // e.g. data === { id: '1', type: 'pen', color: 'orange' }
  // Even though your table shows only selected columns, the row data
  // will still contain the complete object.
  // I would recommend against sending a complete object. In your case,
  // with a single data point, perhaps it is fine though. However,
  // always send bare minimum. For example, if you want to delete an
  // entry on the server side, just send the id of the entry and let
  // the server locate it and delete it by id. It doesn't need all other
  // fields.
}

function deleteData(data) {
  // Just an example how you can have various buttons on each row.
}