Data Tables: How to display Index column and drop down icon in column cell

Question

I have following json response from server.

    {
    "rData": {
        "total": 17,
        "per_page": 3,
        "current_page": 1,
        "last_page": 6,
        "next_page_url": "http://localhost:9901/securityquestionlist/?page=2",
        "prev_page_url": null,
        "from": 1,
        "to": 3,
        "data": [
            {
                "question": "Accessor: 15th question",
                "full_name": "Dave Alex"
            },
            {
                "question": "Accessor: 14th question",
                "full_name": "Dave Alex"
            },
            {
                "question": "Accessor: 13th question",
                "full_name": "Dave Alex"
            }
        ]
    }
 }

I have following HTML code:

<table id="IdSQLTable" class="table table-striped table-bordered table-hover">
 <thead>
    <tr>    
     <th>Ser-No</th>
     <th>Question</th>
     <th>Status</th>  
    </tr>
 </thead>
 <tbody></tbody>

Following is javascript code:

jQuery(document).ready(function() {
   var ObjDt = jQuery('#IdSQLTable').DataTable({

        'ajax'  : {
            'url': 'http://localhost:9901/securityquestionlist',
            'data' :  function( d ){
                d.myKey = 'MyValue';
            },
            'cache' : false,
            'method' : 'POST'
        },

        "columnDefs": [ 
                       {
                        'targets': [ 0 ],
                        'searchable': false,
                        'orderable': false,
                        'defaultContent': '#'
                       },
                       {
                        'targets': [ 3 ],
                        'data': function(){
                            return '<span class="input-group-btn">'
                             +'<button type="button" class="btn btn-dark c-btn-square btn-xs" data-toggle="dropdown">'
                   +'<i class="glyphicon glyphicon-tasks"></i>'
                   +'<span class="caret"></span>'
                   +'</button>'
                   +'<ul class="dropdown-menu" role="menu">'
                   +'<li>'
                   +'<a href="#">Edit Record</a>'
                   +'</li>'
                   +'<li class="divider"></li>'
                   +'<li>'
                   +'<a href="#">Delete Record</a>'
                   +'</li>'
                   +'</ul>'
                   +'</span>';
                   },
                   'defaultContent': 'Click to edit'
                }

         ]                
    });
} );

I tried to copy follow example:

http://datatables.net/examples/api/counter_columns.html

in the following code but it is not generating serial number and only '#' is displayed.

ObjDt.on( 'order.dt search.dt', function () {
        ObjDt.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                      cell.innerHTML = i+1;
                });
      }).draw();

2- Drop down menu in last column is not working.

Can some one guide me how these problems can be rectified.

Answer 1

SOLUTION

There are some issues with your code:

• You need extra column for action menu in thead
• Option dataSrc needs to be set to rData.data to match your data format
• You're using array of objects as your data, therefore need to define data property to use for each column with columns.data option

Corrected code is shown below:

var ObjDt = jQuery('#IdSQLTable').DataTable({
    ajax: {
        url: "http://localhost:9901/securityquestionlist",
        data:  function( d ){
           d.myKey = "MyValue";
        },            
        cache: false,
        method: "POST",            
        dataSrc: "rData.data"
    },
    columns: [
        { 
           data: null,
           searchable: false,
           orderable: false,
           defaultContent: ""
        },
        { data: "question" },
        { data: "full_name" },
        { 
            render: function(data, type, row, meta){
               return '<span class="input-group-btn">'
               +'<button type="button" class="btn btn-dark c-btn-square btn-xs" data-toggle="dropdown">'
               +'<i class="glyphicon glyphicon-tasks"></i>'
               +'<span class="caret"></span>'
               +'</button>'
               +'<ul class="dropdown-menu" role="menu">'
               +'<li>'
               +'<a href="#">Edit Record</a>'
               +'</li>'
               +'<li class="divider"></li>'
               +'<li>'
               +'<a href="#">Delete Record</a>'
               +'</li>'
               +'</ul>'
               +'</span>';                
            }
        }               
    ]
});

ObjDt.on( 'order.dt search.dt', function () {
    ObjDt.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
       cell.innerHTML = i+1;
    });
}).draw();

DEMO

See this jsFiddle for code and demonstration.