在react datatables.net-bs4中,如何在td中将编辑按钮与动态数据绑定

时间:2018-09-26 06:02:54

标签: reactjs datatables

在我的react数据表中,我想向动态数据的每一行添加编辑按钮。 在react datatable.net-bs4中, 我无法将按钮与数据绑定。我想在每行数据中添加编辑按钮。请友好地解决此问题...

查看我上传的Object Object show instead of showing button 照片中的错误

_setDataInTable(list){

    var table;
    if ($.fn.dataTable.isDataTable('#dataTables-category')) {
        table = $('#dataTables-category').dataTable();
        table.fnClearTable();
        table.fnDestroy();
        $('#dataTables-category').empty()
    }
    //if (list.length > 0) {
    var l = []
    for (var i = 0; i < list.length; i++) {
        const data = list[i]
        const obj = {
            No: data.id,
            categoryNameByMM: data.categoryNameByMM,
            categoryNameByEg: data.categoryNameByEg,
            creationDate: data.creationDate,
            active: data.active,
            edit:

                <button className="btn btn-primary btn-sm" data-toggle="modal"
                    data-target="#editModal">
                    <i className="fa fa-cogs"></i>&nbsp;Edit
                </button>

        }
        l.push(obj)
    }

    table = $("#dataTables-category").DataTable({
        data: l,
        columns: [
            { title: "No", data: "No" },
            { title: "Category Name in Myanmar", data: "categoryNameByMM" },
            { title: "Category Name in Myanmar", data: "categoryNameByEg" },
            { title: "Creation Date", data: "creationDate" },
            { title: "Active", data: "active" },
            { title: "Edit", data: "edit" }
        ],
        autofill: true,
        bLengthChange: false,
        bInfo: false,
        responsive: true,
        paging: false,
        buttons: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf'
        ]

    });
}

render(){

    return (
        <div>

            <h1 className="page-header">Category Setup</h1>

            <button className="btn btn-primary btn-sm mb20" data-toggle="modal" data-target="#mymodal">
                <i className="fa fa-user-plus"></i>&nbsp;Add New
                </button>
            <div className="panel pagination-primary clearfix m-b-0">
                <div className="table-responsive" style={{ overflow: 'hidden' }}>
                    <table width="99%"
                        className="table table-striped table-bordered table-hover responsive nowrap"
                        id="dataTables-category"
                    />
                </div>
            </div>

)}

0 个答案:

没有答案