如何在多列jQuery DataTable中添加按钮？答案

【问题标题】：How to add buttons in multiple columns jQuery DataTable?如何在多列jQuery DataTable中添加按钮？
【发布时间】：2018-01-03 03:31:00
【问题描述】：

我想在 jQuery dataTable 的多列中添加按钮。我可以在一列中添加多个按钮。但是，我需要单独的列中的单个按钮。我正在使用 AJAX 方法（JSON 数据）将数据绑定到表。

这是我在单列中添加多个按钮的代码。有人可以帮我，如何将这些按钮分成不同的列。

function loadtable() {
  $.ajax({
    type: "POST",
    url: "../WebMethods/GetData.asmx/getScheduledTests",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      var json = JSON.parse(data.d);
      table1 = $('#myTable').DataTable({
        data: json,
        columns: [
          { className: "hide", data: 'TestId' },
          { data: 'TestKey' },
          { data: 'TestType' },
          { data: 'ClassName' },
          { data: 'SubjectName' },
          { data: 'NoOfQuestions' },
          { data: 'TotalQuestions' },
          { mRender: function (data, type, row) {
              return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
            }
          }
        ]
      });
    }
  });
}

在这里，我添加了 2 个按钮作为视图概念和在单个列中查看试卷。我需要将其放在单独的列中。请帮忙。提前致谢

【问题讨论】：

然后添加呈现按钮的附加数据列
我尝试再添加一个 mRender。但是，它会引发错误。如果我再添加一个 mRender: 函数，数据表将不会被初始化。那么，我究竟如何才能用按钮添加额外的数据列呢？
在下面查看我的答案

标签： jquery datatables

【解决方案1】：

您只需添加额外的data column 即可添加带有button 的额外列

 table1 = $('#myTable').DataTable({
    data: json,
    columns: [
      { className: "hide", data: 'TestId' },
      { data: 'TestKey' },
      { data: 'TestType' },
      { data: 'ClassName' },
      { data: 'SubjectName' },
      { data: 'NoOfQuestions' },
      { data: 'TotalQuestions' },
      { data: "TotalQuestions", render: function (data, type, row) {
          return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
        }
      },
      { data: "TotalQuestions", render: function (data, type, row) {
          return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
        }
      }
    ]
  });

【讨论】：

不要忘记在 html 中添加更多列
@object 参考：非常感谢您的回答。这对我来说很完美。