Question

我有来自服务器的json响应。

    {
    "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"
            }
        ]
    }
 }

我有以下HTML代码：

<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>

以下是javascript代码：

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'
                }

         ]                
    });
} );

我试图复制以下示例：

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

在以下代码中，但它不生成序列号，只显示“＃”。

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-最后一栏的下拉菜单无效。

有人可以指导我如何纠正这些问题。

Answer 1

<强>解

您的代码存在一些问题：

thead
需要将dataSrc选项设置为rData.data以匹配您的数据格式
您正在使用对象数组作为数据，因此需要使用columns.data选项

更正后的代码如下所示：

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();

<强>样本

请参阅this jsFiddle以获取代码和演示。

数据表：如何在列单元格中显示索引列和下拉图标

1 个答案: