【问题标题】:In jQuery Datatables, how we define fixed value columns?在 jQuery Datatables 中,我们如何定义固定值列?
【发布时间】:2015-08-22 16:26:35
【问题描述】:

使用Jquery.datatables,我构建了一个数据表,它通过Ajax 以Json 格式从服务器动态加载数据。这是我的代码:

$('#MyTable').dataTable({
  'sAjaxSource': '/Accounting/Action/GetData',
  'bStateSave': false,
  'bProcessing': true,
  'bServerSide': true,
  'data': {
  },
  'lengthChange': true,
  'aoColumns': [
    {
      'mData': 'ActionID',
      'title': 'کد',
      'sClass': ''
    },
    {
      'mData': 'ActionTitle',
      'title': 'عنوان',
      'sClass': ''
    }
  ],
  'sPaginationType': 'bootstrap'
});

它生成:

ActionID | ActionTitle  
=========+=============
  1      |  Foo         
---------+-------------
  2      |  Bar         
---------+-------------
  3      |  Blah Blah   
---------|------------

好的,但是我想为所有行添加一个具有固定值的列,我不通过将列添加到服务器发送的 Json 数据来做到这一点。例如我想在客户端添加MyFixedCol 到MyGrid:

ActionID | ActionTitle | MyFixedCol
=========+=============+===========
  1      |  Foo        | FIXEDVAL
---------+-------------+-----------
  2      |  Bar        | FIXEDVAL
---------+-------------+-----------
  3      |  Blah Blah  | FIXEDVAL
---------|-------------+-----------

我该怎么做?

【问题讨论】:

标签: javascript jquery jquery-datatables


【解决方案1】:

我发现了一个技巧,它对我有用。所以我在这里分享,也许可以帮助某人:)

datatables 有一个 createdRow 回调,它会在创建行时触发它。然后我在相关行中添加一个<td>,它适用于所有行:

'createdRow': function ( row, data, index ) {
    $(row).append($('<td>').html('FIXEDVAL'));
  }

所以我在问题中的代码已经完成:

$('#MyTable').dataTable({
  'sAjaxSource': '/Accounting/Action/GetData',
  'bStateSave': false,
  'bProcessing': true,
  'bServerSide': true,
  'data': {
  },
  'lengthChange': true,
  'aoColumns': [
    {
      'mData': 'ActionID',
      'title': 'کد',
      'sClass': ''
    },
    {
      'mData': 'ActionTitle',
      'title': 'عنوان',
      'sClass': ''
    }
  ],
  'sPaginationType': 'bootstrap',
  'createdRow': function ( row, data, index ) {
       $(row).append($('<td>').html('FIXEDVAL'));
  }
});

【讨论】:

    猜你喜欢
    • 2017-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-11
    • 2019-03-11
    相关资源
    最近更新 更多