Question

我有以下逻辑来创建一个jquery dataTable：

  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>';
                        } 
                    }
                }
        ]
    } );

到目前为止，这么好。一切正常。但是现在我需要装备我的＆＃34; Show＆＃34;按钮，以便在单击时触发对数据库的ajax调用并显示一个对话框。

这是有问题的一行：

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

为了对数据库进行ajax调用，我需要知道＆＃34; id＆＃34;该特定行的列。换句话说，我需要这一栏中的数据：

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

我希望能够嵌入＆＃34; id＆＃34;作为按钮上的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');
    ...
});

示例 - ＆gt;的 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 - 创建具有静态内容的列

3 个答案: