向数据表页面添加按钮

问题描述 投票:0回答:0

我制作了一个数据表并希望最后一列有 1-2 个按钮? 如果可能的话,代码应该能够读取列值并根据该值设置按钮。

这是我的表格的html

<div class="container text-nowrap " >
          <h1 class="text-center">Ideas</h1>
          <table class="table table-hover table-bordered mb-0 " id="newideastable">
            <thead >
              <tr class="text-center" >
                <th  style="background-color: #009879;">No.</th>
                <th>Title</th>

                ....... other rows

                <th>Published Date</th>
                <th style="background-color: #009879;">Options</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
</div>

这是我的 jquery

let table = new DataTable('#newideastable', {
    scroller: true,
    scrollX: true,
    scrollY: false,
    pagingType: "full",
    fixedColumns: {
          left: 1,
          right: 1
      },
    "language": {
          "paginate": {
                  page: 'Page %d',
                  pageOf: 'of %d',
                  info: 'Displaying records %d - %d of %d',
                  infoEmpty: 'No records to display',
                  infoFiltered: '(filtered from %d total records)',
            }
      },
      "ajax": {
        "url": "/ideas",
        "dataSrc": "",
        "type": "GET",
        "dataType": "json"
      },
      
      "columns": [
        { "data": "idea_number" },
        ...... other data
        { "data": "date" }
      ],
      "createdRow": (row, data, dataIndex) => {
            $(row).addClass("table-info");
            $(row).on('click', function() {
                setideamodal(data.idea_number);// sets a pop up bootstrap modal
            });
      }
    // options
  });

现在我正在做的是使用 defaultContent(https://datatables.net/reference/option/columns.defaultContent) 设置按钮,然后在 ajax 调用之后立即使用另一个函数来遍历它们中的每一个并设置按钮。

它确实是这样工作的,但我在技术上避免了这个问题。我可以在 ajax 调用中执行此操作吗?如果可能的话,可以使用同一列的数据值吗?

jquery ajax datatables bootstrap-5
© www.soinside.com 2019 - 2024. All rights reserved.