Question

我只是从今天开始才开始学习数据表，我在他们的网站上阅读了很多有关FAQ的信息，但是在那里找不到任何解决方案。

我正在尝试设置一个ID为（data[0]）的按钮。单击时，具有id + data [0]的div将折叠，其中包含所选行的选项和表单。

我想放置一个ID为ID的按钮和div与行data[0]相同。例如，我想使用ID存档，编辑或删除特定行。

为了更好地理解

这是我当前的代码：

var dataTable = $('#testT').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax":{
                    url :"search_e_que.php",
                    type: "post" 

                },
                "columnDefs": [ {
                            "targets": -1,
                            "data": null,
                            "defaultContent": "\
                                    <button class='btn btn-outline-dark' type='button' id='arcb-' title='Archive'>\
                                        <span class='fa fa-file-archive'></span>\
                                    </button>\
                                    <div class='collapse' id='arcc-'>\
                                        Possible Options Here\
                                    </div>",

                 },
                 {
                 // hide id_number column
                 "targets":[0],
                 "visible":false,
                 "searchable":false
                 } ],
            } );

             $('#testT tbody').on( 'click', '#arcb-', function () {
                var data = dataTable.row( $(this).parents('tr') ).data();
                var id_tag = $(this).attr('id')+data[0];
                var holder_tag = $('#arcc-').attr('id')+data[0];

                $('#arcc-').collapse();
            } );

任何建议或调试选项将不胜感激。

Answer 1

我找到了解决方案。 column.render达到了目的。

"columnDefs": [{
          "data":null,
          "render":function(data, type, row, meta){
             return data[0],data[1],data[2],data[3],data[4],data[5];
          }},
         {
            "targets":-1,
            "data":null,
             "render":function(data, type, row, meta){
             return "
                <button class='btn btn-outline-dark' type='button' data-toggle='collapse' name='arcb' data-target='#arcc-"+data[0]+"' id='arcb-"+data[0]+"' title='Archive'>\
                    <span class='fa fa-file-archive text-warning'></span>\
                </button>\
                <div class='row collapse' id='arcc-"+data[0]+"' name='arcc'>\
                        <form method='POST' name='archiveEmp' action='../../admin/employee/archiveEmployee.php'>\
                            <div class='form-group col-sm-12'>\
                                <label id='eTitle-"+data[0]+"'>Effectivity Date:</label>\
                                <input id='eDate-"+data[0]+"' type='date' name='archiveEffectDate' class='form-control' max='2999-12-31' required />\
                                </div>\
                            <div class='form-group col-sm-12'>\
                                <label id='aTitle-"+data[0]+"'>Archive Status :</label>\
                                <select id='a-status-"+data[0]+"' name='archive' class='form-control mb-3' required>\
                                    <option value ='-----''>-- Select Status--</option>\
                                    <option value ='AWOL'>AWOL</option>\
                                    <option value ='Deceased'>Deceased</option>\
                                    <option value ='Resigned'>Resigned</option>\
                                    <option value ='Retired'>Retired </option>\
                                    <option value ='Terminated'>Terminated</option>\
                                    <option value ='Transferred'>Transferred</option>\
                                    </select>\
                                <div class='text-right col-sm-12'>\
                                    <button class='btn btn-primary' data-toggle='tooltip' title='Archive Employee' type='submit' id='btnOk-"+data[0]+"' name='btnArc'><span class='fa fa-archive'></span> Archive </button>\
                                    <button class='btn btn-danger'  data-toggle='collapse' data-target='#arcc-"+data[0]+"' title='Cancel' type='button' id='btnCancel-"+data[0]+"'><span class='fa fa-ban'></span> Cancel</button>\
                                </div>\
                            </div>\
                            <input type='hidden' name='empIDHold' value='"+data[0]+"'/>\
                            <input type='hidden' name='isActive' value='0'/>\
                        </form>\
                </div>\
                ";
          }



         }, 
         {
 // hide id_number column
 "targets":[0],
 "visible":false,
 "searchable":false,
 },
 {
 "targets":[3],
 "searchable":false
 }],

"order": [[ 4, "asc" ]],

DataTable如何将id放在按钮上？

1 个答案: