Question

我正在使用jquery创建数据表：

$('#collectionsList').dataTable( {
    "bJQueryUI": true,
    "bPaginate" : false,
    "bFilter": false,
    "oTableTools": {
        "sRowSelect": "multi"
    },

    "sAjaxSource": serverServicesHandler.get("getCollections"),
        "fnInitComplete" : function(oSettings, json){
    }
})

我希望在点击时选择一行。

我补充说：

"oTableTools": {
    "sRowSelect": "multi"
}

但它不起作用。为什么呢？

Answer 1

您可以按照以下方式执行此操作：

 oTable = $('#collectionsList').dataTable( ....);

 $('#collectionsList tbody tr').live('click', function (event) {        
 var aData = oTable.fnGetData(this); // get datarow
 if (null != aData)  // null if we clicked on title row
 {
        //now aData[0] - 1st column(count_id), aData[1] -2nd, etc. 
 }});

Answer 2

要使TableTools正常工作，您必须设置.dataTables.sDom并在字符串中包含“T”。像这样：

$('#example').dataTable({
        sDom: 'T<"clear">lfrtip',
        oTableTools: {
            "sRowSelect": "multi"
        }
});

Answer 3

要显示所选行，我在行中使用此单击功能：

$('body').on("click",'#collectionsList tbody tr',function() {
  if ($(this).hasClass('row_selected')) 
    $(this).removeClass('row_selected'); // select or deselect row
  else {
    /* I don't put this line below
    //---> $(this).siblings('.row_selected').removeClass('row_selected');
    */
    $(this).addClass('row_selected'); // add selected row
  }
  var aData = oTable.fnGetData(this); // get tha data array from columns
  var col0 = aData[0];  // get the first column value
  var col1 = aData[1];  // get the second column value
  var rowsID=this.id; // rowsID is your id of <tr>
});

选择数据表行

3 个答案: