在数据表中的 <td> 内添加输入

Question

首先，我使用 datatables.net 插件创建了一个 table，其中数据由 ajax 获取，这是源代码

var dtBasicExample = $("#dtBasicExample").DataTable({
          paging: true,
          lengthChange: true,
          searching: true,
          ordering: true,
          info: true,
          autoWidth: true,
          responsive: true,
          columnDefs: [
            {
              orderable: false,
              className: "select-checkbox",
              targets: 0,
            },
          ],
          select: {
            style: "single",
            selector: "td:first-child",
          },
          order: [[1, "asc"]],
          ajax: "/api/view_excel",
          columns: [
            { data: "null" },
            { data: "NB" },
            { data: "NAMAPEMOHON" },
            { data: "ALAMATPEMOHON" },
            { data: "DI 302/303" },
            { data: "DI305" },
            { data: "JML BLANKO" },
            { data: "NAMAPROSEDUR" },
            { data: "SERIAWAL" },
            { data: "SERIAKHIR" },
            { data: "KETERANGAN" },
          ],
        });

上面的源代码是正确的。我的问题是，是否可以在 <td> 标签内添加 input:text 标签？所以 table 中的所有数据都将在 POST Request

上发送

我尝试了一些小实验，例如像下面的代码一样使用 columnDefs

columnDefs: [
            {
              targets: -1,
              render: function (data, type, row) {
                var checkbox = '<input type="text" value="' + data.NB + '">';
                return checkbox;
              },
            },
          ],

但是，它没有用，对我的问题有什么建议吗？谢谢

Answer 1

最后，像这样在列列表中使用渲染

var dtBasicExample = $("#dtBasicExample").DataTable({
          paging: true,
          lengthChange: true,
          searching: true,
          ordering: true,
          info: true,
          autoWidth: true,
          responsive: true,
          columnDefs: [
            {
              orderable: false,
              className: "select-checkbox",
              targets: 0,
            },
          ],
          select: {
            style: "single",
            selector: "td:first-child",
          },
          order: [[1, "asc"]],
          ajax: "/api/view_excel",
          columns: [
            { data: "null" },
            // { data: "NB" },
            {
              data: "NB",
              render: function (data, type, row, meta) {
                return (
                  '<input type="text" name="col1[]" style="border:0;outline:0;display:inline-block"  value="' +
                  data +
                  '">'
                );
              },
            },
            { data: "NAMAPEMOHON" },
            { data: "ALAMATPEMOHON" },
            { data: "DI 302/303" },
            { data: "DI305" },
            { data: "JML BLANKO" },
            { data: "NAMAPROSEDUR" },
            { data: "SERIAWAL" },
            { data: "SERIAKHIR" },
            { data: "KETERANGAN" },
          ],
        });

在数据表中的 <td> 内添加输入

adding input inside <td> in datatables

javascript

datatables