简体   繁体   中英

want to get the primary key of the row i have selected, datatables

I have a table in a database which outputs this JSON:

{"sEcho":1,
"iTotalRecords":7,
"iTotalDisplayRecords":7,
"aaData":[
    {"FormID":"6",
         "FormName":"Configuration",
          "FormPath":"#","FormCIPath":"#"}, 
    {"FormID":"1",
          "FormName":"Dashboard",
          "FormPath":"#",
           "FormCIPath":"admin\/dashboard\/System"}],
"sColumns":"FormName,FormPath,FormCIPath"}

But I have not given any columns in the datatables a FormID, as I don't want to show the FormID of database to public.

But how can I get the FormID?

Here is the Javascript:

<script>
    $(document).ready(function() {
        var oTable = $('#ManageForms').dataTable({

            "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
            }
        });

        //Edit Button on Modal Window
        $('#ManageForms').on('click', '.editBtnFunc', function(e){
            e.preventDefault();
            //var aPos = oTable.fnGetPosition( this );
            //var aData = oTable.fnGetData( aPos[0] );
            console.log(oTable);
        });
        //Edit Button
    } );


</script>

Here is the HTML

<div class="row ui-sortable">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons">
                    <i class="fa fa-table"></i>
                </div>
                <h5>Manage Forms</h5>
            </header>
            <div class="body" id="collapse4">
                <table id="ManageForms" class="table table-bordered table-condensed table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Form Name</th>
                            <th>Form Path</th>
                            <th>Form CI Path</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

In order to get the fnGetPosition(this), you should click either TR, TD or TH in the table's body. You can find closest td or tr of ".editBtnFunc" tag and get position of row.

   $('#ManageForms').on('click', '.editBtnFunc', function(e){
          var row = $(this).closest('tr');
          var aPos = oTable.fnGetPosition( row );
          var aData = oTable.fnGetData( aPos[0] ); 
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM