jquery dataTables - 创建一个包含静态内容的列

Question

我有以下逻辑来创建 jquery 数据表：

  var selected = [];
    $('#users').DataTable( {
        "processing": false,
        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/pid_list",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pnumber", "searchable":true },    
                { "data": "destination", "searchable":true },
                { "defaultContent": "<button id=showgrp>Show</button>"},
                { "mRender": function ( data, type, row) {
                        var temp = formatnameURI(row.name);
                        if (row.destination=='Group') {
                                return '<a href=update.html?id=' + row.id + '&pid=' + row.pnumber + '&destination=' + row.destination + '&name=' + temp + '>Edit</a>&nbsp;&nbsp;<a href=# onclick=delete(' + row.id + ',' + row.pnumber + ',true)>Delete</a>';

                        } else {
                                return '<a href=add.html?id='+ row.id +'&pid='+row.pnumber + '&destination='+row.destination+'&name='+temp+'>Edit</a>&nbsp;&nbsp<a href=# onclick=delete('+row.id+','+row.pnumber+',0)>Delete</a>';
                        } 
                    }
                }
        ]
    } );

到目前为止，还不错。一切正常。但现在我需要安装我的 "Show" 按钮，以便在单击它时触发对数据库的 ajax 调用并显示一个对话框。

这是有问题的行：

  { "defaultContent": "<button id=showgrp>Show</button>"},

为了对数据库进行 ajax 调用，我需要知道该特定行的 "id" 列中的值。换句话说，我需要此列中的数据：

{ "data": "id" ,"searchable":false},

我希望将 "id" 作为 id 标签的一部分嵌入到按钮上，例如

  <button id = showgrp_XX>Show</button>

其中 XX 是 id 列的值。

我目前正在阅读 dataTables 手册，但我还没有找到任何东西。

Answer 1

无法测试，我会说你应该这样做

{ 
   mRender : function(data, type, row) {
       return '<button data-id="'+row.id+'">Show</button>'
   }
}

而不是

{ "defaultContent": "<button id=showgrp>Show</button>"},

当按钮被点击时，可以获取id

$("#users").on('click', 'button', function() {
    var id = $(this).data('id');
    ...
});

示例 -> http://jsfiddle.net/6nckztco/

Answer 2

您可以为每个按钮注册 onclick 事件并传递 'this' 引用。

<button onclick="showID(this);">Show</button>

function showID(currButton){
dTable = $('#users').DataTable();
rowIndex = dTable.$(currButton).parent().parent().index();  // This is jQuery, you may want to find more efficient traversing ways.
idVal = dTable.cell(rowIndex,0).data();
}

Answer 3

Must avoid (,) spliter in like<name="" ,class=""> so resolve it

  {
  "data": null, "defaultContent":'<input type="checkbox" name="IndividualCheckboxes" class="SingleCheckboxes" style="cursor:pointer;" id="'+this.id +'"/>',


                },

jquery dataTables - 创建一个包含静态内容的列

jquery dataTables - creating a column with static content

jquery

datatables