如何从所选行，数据表中获取数据

Question

ok, finally i made though to get id show in datatables but not visible on grid.

i want to get the id, throught jquery selector or any other good way if possible.

Here is the Output HTML

<table class="table table-bordered table-condensed table-hover table-striped dataTable no-footer" id="ManageForms" role="grid" aria-describedby="ManageForms_info" style="width: 1618px;">
                        <thead>
                        <tr role="row"><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 351px;" aria-label="Form Name: activate to sort column ascending">Form Name</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 324px;" aria-label="Form Path: activate to sort column ascending">Form Path</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 535px;" aria-label="Form CI Path: activate to sort column ascending">Form CI Path</th><th class="ui-state-default sorting" tabindex="0" aria-controls="ManageForms" rowspan="1" colspan="1" style="width: 258px;" aria-label="Actions: activate to sort column ascending">Actions</th></tr>
                        </thead>
<tbody><tr role="row" class="odd" data-id="1"><td>Dashboard</td><td>#</td><td>admin/dashboard/System</td><td><a class="editBtnFunc" data-toggle="modal" href="#editBtnModal"><i class="fa fa-pencil fa-fw fa-2x" style="color: #666666"></i></a><a id="deleteBtn" href="#"><i class="fa fa-times fa-fw fa-2x" style="color: #ff0000"></i></a></td></tr><tr role="row" class="even" data-id="2"><td>Dashboard</td><td>#</td><td>admin/dashboard/Users</td><td><a class="editBtnFunc" data-toggle="modal" href="#editBtnModal"><i class="fa fa-pencil fa-fw fa-2x" style="color: #666666"></i></a><a id="deleteBtn" href="#"><i class="fa fa-times fa-fw fa-2x" style="color: #ff0000"></i></a></td></tr></tbody>
                        </table>

Just need to get the data-id from the tr.

i tried this.closest('tr') but got error.

any suggestions..

Here is the script.

<script>
        $(document).ready(function() {
            var oTable =  $('#ManageForms').dataTable({
                 "aoColumns": [
                     /* ID */   {
                         "bVisible":    false,
                         "bSortable":   false
                     },
                     /* Form Name */  null,
                     /* Form Path */  null,
                     /* Form CI Path */  null,
                     /* Actions */  null
                 ],

                "bServerSide":true,
                "bProcessing":true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                //"bFilter":true,
                //"sServerMethod": "POST",
                "sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
                "iDisplayLength": 2,
                "aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
                /*"sEcho": 1,
                "columns":[
                    {data:"FormName"},
                    {data:"FormPath"},
                    {data:"FormCIPath"},
                    { "data": null,
                        "defaultContent": "<a href='#editBtnModal' class='editBtnFunc' ><i style='color: #666666' class='fa fa-pencil fa-fw fa-2x'></i></a><a href='#' id='deleteBtn'><i style='color: #ff0000' class='fa fa-times fa-fw fa-2x'></i></a>",
                        "targets": -1
                    }
                ],*/
                'fnServerData'   : function(sSource, aoData, fnCallback){
                    $.ajax ({
                        'dataType': 'json',
                        'type'    : 'POST',
                        'url'     : sSource,
                        'data'    : aoData,
                        'success' : fnCallback
                    }); //end of ajax
                },
                'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $(nRow).attr("data-id",aData[0]);
                    return nRow;
                }
            });

            //Edit Button on Modal Window
            $('#ManageForms').on('click', '.editBtnFunc', function(e){
                e.preventDefault();
            var FormID = $(this).find('data-item').value();
            console.log(FormID);
            });
            //Edit Button
        } );


    </script>

Answer 1

I hope this will work for you:

$(this).closest('tr').attr('data-id');