带有 java servlet 和每行提交按钮的 Datatables.js

Question

我正在创建一个页面，在该页面中我使用 DataTables.js 来显示信息，并且计划在每一行上都有一个提交按钮，用于提交包含行信息的表单。

起初我使用 jstl 循环来生成有效的表格，但这遇到了一些问题，即在表格的循环中使用标签来提交每一行。

所以现在，在 servlet 中，我有一个 List，它从控制器传递到 servlet，并使用 Gson 转换为 Json 字符串。在控制台中，当导航到页面时，我可以确认字符串具有正确的数据，因为我在控制台中将其打印出来。

现在我的问题是如何利用这个属性，我使用 req.setAttribute("allX", allX) 设置它以将其传递给 JSP。

我在 JSP 的底部有一个脚本标签来填充表格

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

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

    });
});
</script>

在jsp 上面我有一个id 为allTable 的标签。

我真正需要帮助的是从 Json 字符串中正确显示表中的数据，然后向每一行添加一个提交按钮，将行中的信息提交回 servlet，此时可能只会永远是每行一个数据点。我可以处理 servlet 中的数据并处理它以供其他地方使用，它只是这个表数据，我有一个很大的问题。

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.
}