如何在数据表中获取当前呈现的元素

时间:2013-01-05 21:40:47

标签: javascript jquery datatables

我需要根据元素位置更改单元格的渲染,而不更改数据, 在文档中,我找到mDatamRender选项,我尝试使用fnRender(已被删除),但它给了我位置,但在渲染时更改了表中的数据,所以我想知道是否在这里什么方法可以在渲染时获取单元格位置,或者我应该在每次更改后自己重新渲染表格?

以下代码说明了我的需求:

$(document).ready( function() {
  var oTable = $('#example').dataTable( {
    "aoColumnDefs": [ {
      "aTargets": ['_all'],
      "mRender": function ( data, type, full ) 
      {
        if (type!='display') return data;
        //HOW to get current cell indexes or DOM element here ?
        console.log(this,data,type,full);
        return data+' ttt';
      }
    } ]
  } );

  $('#example > tbody > tr').on('click','td',function() {
   console.log(this);
   var pos=oTable.fnGetPosition(this);
   var value=oTable.fnGetData(this);
   oTable.fnUpdate(value.split("").reverse().join(""),pos[0],pos[2]);
  });


  var button=$('<button>').text('clickme');
  button.click(function() { console.log(oTable.fnGetData());});
  $('body').append(button);
});

http://live.datatables.net/enirid/3/edit

使用fnRender的样本:

$(document).ready( function() {
  var oTable = $('#example').dataTable( {
    "aoColumnDefs": [ {
      "aTargets": ['_all'],
      "fnRender": function ( obj, data ) 
      {
        console.log(obj,data);
        var col=obj.iDataColumn;
        //HOW to change display here without changing data of table
        return data+' '+col;
      }
    } ]
  } );


   $('#example > tbody > tr').on('click','td',function() {
   console.log(this);
   var pos=oTable.fnGetPosition(this);
   var value=oTable.fnGetData(this);
   oTable.fnUpdate(value.split("").reverse().join(""),pos[0],pos[2]);
  });


  var button=$('<button>').text('clickme');
  button.click(function() { console.log(oTable.fnGetData());});
  $('body').append(button);
});

http://live.datatables.net/opubaj/edit

1 个答案:

答案 0 :(得分:0)

试试fnCreatedCell。 附上了datatables.net提供的示例代码段:

$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [ {
      "aTargets": [3],
      "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
        if ( sData == "1.7" ) {
          $(nTd).css('color', 'blue')
        }
      }
    } ]
  });
} );