Javascript 有没有办法在datatable的每一行上添加按钮？[反应js]

我想在react js中datatable的每一行上添加两个按钮[编辑和删除]

但我不知道该怎么做； 请指导我，让我了解如何处理或解决这个问题

为了解决这个问题，我尝试了这个代码。 但这是不可能的

我的代码

    import Datatable from "../../../common/tables/components/Datatable";


<Datatable
    options={{
      ajax: "http://demo.weybee.in/react/results.json",
      columns: [
        { data: "companycode" },
        { data: "companyname" },
        { data: "firstname" },
        { data: "cityid" },
        { data: "contactno" },
        { data: "workno" },
        { data: <button>Click!</button>}
      ],
      buttons: ["colvis",]
    }}
    className="table table-striped table-bordered table-hover"
    width="100%"
  >
    <thead>
      <tr>
        <th data-hide="phone">Code</th>
        <th data-class="expand">CompanyName</th>
        <th>Firstname</th>
        <th data-hide="phone">City</th>
        <th data-hide="phone,tablet">Mobile Number</th>
        <th data-hide="phone,tablet">Work Number</th>
        <th>Actions</th>
        </tr>
    </thead>
  </Datatable>

import React from "react";

import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {
  componentDidMount() {
    this.datatable(this.props.data);
  }

  datatable() {
    const element = $(this.refs.table);
    let { options } = { ...this.props } || {};

    let toolbar = "";
    if (options.buttons) toolbar += "B";
    if (this.props.paginationLength) toolbar += "l";
    if (this.props.columnsHide) toolbar += "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: url,
        complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
      };
    }

    options = {
      ...options,
      ...{
        dom:
          "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
          toolbar +
          ">r>" +
          "t" +
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        oLanguage: {
          sSearch:
            "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
          sLengthMenu: "_MENU_"
        },

        autoWidth: true,
        retrieve: true,
        responsive: true
      }
    };

    const _dataTable = element.DataTable(options);

    if (this.props.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
          .column(
            $(this)
              .parent()
              .index() + ":visible"
          )
          .search(this.value)
          .draw();
      });
    }

    if (!toolbar) {
      element
        .parent()
        .find(".dt-toolbar")
        .append(
          '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
        );
    }

    if (this.props.detailsFormat) {
      const format = this.props.detailsFormat;
      element.on("click", "td.details-control", function() {
        const tr = $(this).closest("tr");
        const row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

  render() {
    let {
      children,
      options,
      detailsFormat,
      paginationLength,
      ...props
    } = this.props;
    return (
      <table {...props} ref="table">
        {children}
      </table>
    );
  }
}

从“../../../common/tables/components/Datatable”导入数据表；
代码
公司名称
名字
城市
手机号码
工作编号
行动

数据表的实际编码

    import Datatable from "../../../common/tables/components/Datatable";


<Datatable
    options={{
      ajax: "http://demo.weybee.in/react/results.json",
      columns: [
        { data: "companycode" },
        { data: "companyname" },
        { data: "firstname" },
        { data: "cityid" },
        { data: "contactno" },
        { data: "workno" },
        { data: <button>Click!</button>}
      ],
      buttons: ["colvis",]
    }}
    className="table table-striped table-bordered table-hover"
    width="100%"
  >
    <thead>
      <tr>
        <th data-hide="phone">Code</th>
        <th data-class="expand">CompanyName</th>
        <th>Firstname</th>
        <th data-hide="phone">City</th>
        <th data-hide="phone,tablet">Mobile Number</th>
        <th data-hide="phone,tablet">Work Number</th>
        <th>Actions</th>
        </tr>
    </thead>
  </Datatable>

import React from "react";

import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {
  componentDidMount() {
    this.datatable(this.props.data);
  }

  datatable() {
    const element = $(this.refs.table);
    let { options } = { ...this.props } || {};

    let toolbar = "";
    if (options.buttons) toolbar += "B";
    if (this.props.paginationLength) toolbar += "l";
    if (this.props.columnsHide) toolbar += "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: url,
        complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
      };
    }

    options = {
      ...options,
      ...{
        dom:
          "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
          toolbar +
          ">r>" +
          "t" +
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        oLanguage: {
          sSearch:
            "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
          sLengthMenu: "_MENU_"
        },

        autoWidth: true,
        retrieve: true,
        responsive: true
      }
    };

    const _dataTable = element.DataTable(options);

    if (this.props.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
          .column(
            $(this)
              .parent()
              .index() + ":visible"
          )
          .search(this.value)
          .draw();
      });
    }

    if (!toolbar) {
      element
        .parent()
        .find(".dt-toolbar")
        .append(
          '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
        );
    }

    if (this.props.detailsFormat) {
      const format = this.props.detailsFormat;
      element.on("click", "td.details-control", function() {
        const tr = $(this).closest("tr");
        const row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

  render() {
    let {
      children,
      options,
      detailsFormat,
      paginationLength,
      ...props
    } = this.props;
    return (
      <table {...props} ref="table">
        {children}
      </table>
    );
  }
}

从“React”导入React；
从“jquery”导入$；
要求（“datatables.net bs”）；
要求（“datatables.net按钮bs”）；
require（“datatables.net buttons/js/buttons.colVis.js”）；
require（“datatables.net buttons/js/buttons.flash.js”）；
require（“datatables.netbuttons/js/buttons.html5.js”）；
require（“datatables.net buttons/js/buttons.print.js”）；
要求（“datatables.net colreorder bs”）；
要求（“datatables.net响应bs”）；
要求（“datatables.net选择bs”）；
导出默认类Datatable扩展React.Component{
componentDidMount（）{
this.datatable（this.props.data）；
}
数据表（）{
常量元素=$（this.refs.table）；
让{options}={…this.props}| |{}；
让工具栏=”；
如果（选项.按钮）工具栏+=“B”；
如果（this.props.paginationLength）工具栏+=“l”；
如果（this.props.columnsHide）工具栏+=“C”；
if（typeof options.ajax==“string”）{
让url=options.ajax；
options.ajax={
url:url，
完成：函数（xhr）{
//AjaxActions.contentLoaded（xhr）
}
};
}
选项={
…选项，
...{
dom:
"" +
“t”+
"",
语言：{
搜索：
" ",
长度菜单：“\u菜单”
},
自动宽度：正确，
检索：对，
回答：对
}
};
const _dataTable=element.dataTable（选项）；
如果（此.props.filter）{
//应用过滤器
元素上（“键控更改”，“第四次输入[type=text]”，函数（）{
_数据表
.栏目(
$（本）
.parent（）
.index（）+“：可见”
)
.search（此.value）
.draw（）；
});
}
如果（！工具栏）{
要素
.parent（）
.find（“.dt工具栏”）
.附加(
''
);
}
如果（此.道具.细节格式）{
const format=this.props.detailsFormat；
元素上（“单击”，“td.details控件”，函数（）{
const tr=$（this.closest（“tr”）；
常量行=_dataTable.row（tr）；
if（row.child.isShown（））{
row.child.hide（）；
tr.removeClass（“所示”）；
}否则{
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
});
}
}
render（）{
让{
儿童
选项，
详情格式：，
页码长度，
…道具
}=这是道具；
返回(
{儿童}
);
}
}

错误

---

对象对象在datatable上显示[in Action column]，而不是按钮。

在我的项目中，我使用类似以下内容：

let buttonDetails = "<a href='" + urlDetails + "' title='" + titleDetails +"' class='dtDetails' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-search'></span></a>";

let buttonEdit = "<a href='"+urlEdit+"' title='"+titleEdit+"' class='dtEdit' data-target='#remoteModal' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-pencil'></span></a>";

let buttonDelete = "<a href='" + urlDelete + "' title='" + titleDelete +"' class='dtDelete' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-remove'></span></a>";

...

 "columnDefs": [
    ...
    {
        "targets": [2],
        "width": miCustomWidth,
        "className": "center",
        "data": function (d) {          
            return buttonDetails.replace("ID_X", d.rowIdField) + " " + buttonEdit.replace("ID_X", d.rowIdField) + " " + buttonDelete.replace("ID_X", d.rowIdField);
        }
    }
    ...
    ]

let buttonDetails=“”；
让我们按一下按钮吧“”；
让buttonDelete=“”；
...
“columnDefs”：[
...
{
“目标”：[2]，
“宽度”：miCustomWidth，
“类名称”：“中心”，
“数据”：函数（d）{
返回按钮详细信息。替换（“ID_X”，d.rowIdField）+按钮编辑。替换（“ID_X，d.rowIdField）++按钮删除。替换（“ID_X，d.rowIdField”）；
}
}
...
]