帶有Java servlet和每行提交按鈕的Datatables.js

Question

我正在創建一個使用DataTables.js來顯示信息的頁面，並且計划是在每行上都有一個提交按鈕，以提交帶有行信息的表單。

最初，我使用jstl循環生成可以工作的表，但這在表的循環中有一個標記來提交每一行時遇到了一些問題。

因此，現在，在Servlet中，我有一個列表，該列表從控制器傳遞到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.
}