在数据表上创建具有多个列值的编辑链接,并在单个/自定义列上进行全局搜索

时间:2017-01-11 15:49:48

标签: javascript jquery datatables

如何使用从ajax返回的数据列中具有多个参数的函数创建编辑链接。

我读到了渲染回调,但它只获得了一个列值&我需要2。 我需要类似下面的伪代码。

"columnDefs": [ {
            "targets": [0,1],
            "data": "0,1",
            "render": function ( data, type, full, meta ) {
                return `<a href="javascript:;" onclick="edit(${data[0]}, ${data[1]})"></a>`
            }
        } ]

因为我在除了一个列之外的所有列上禁用全局搜索。我不能使用上面使用targets属性的代码。我不知道如何实现这一点,请指导。

修改:完整代码

var datatable = $('#datatable').DataTable({
        "ajax": "/get_data/",
        "processing": true,
        "serverSide": true,
        "deferRender": true,

        "columnDefs": [
            { "searchable": false, "targets": [ 0,2,3,4,5,6,7,8,9,10,11 ] }
        ]
    });

2 个答案:

答案 0 :(得分:1)

您可以使用full变量访问行数据,例如full[0]full[1]

但是,我不是在HTML中生成链接,而是在单击处理程序中检索行数据,如下所示:

$('#example').DataTable({
   "columnDefs": [ 
      {
         "targets": [0, 1],           
         "render": function ( data, type, full, meta ) {
            return '<a href="javascript:;" class="btn-edit">Edit</a>';
         }
      } 
   ],
   // ... other options ...
});

$('#example').on('click', '.btn-edit', function(){
   // Get row data
   var data = $('#example').DataTable().row($(this).closest('tr')).data();

   edit(data[0], data[1]);
});

答案 1 :(得分:1)

我需要在第一列上编辑链接,所以我按照@ Gyrocode.com回答并且效果很好。

我还想使用全局搜索进行搜索,但只能在一列上使用。 Datatable ColumnDef Documentation给了我线索所以我最终做了如下。

这里有完整的代码:

var datatable = $('#datatable').DataTable({
    "ajax": "/get_data/",
    "processing": true,
    "serverSide": true,
    "deferRender": true,

    "columnDefs": [ 
        {
            "targets": 0,
            "render": function ( data, type, full, meta ) {
                return '<a href="javascript:;" class="btn-edit">Edit</a>';
            }
        },
        { targets: 1, searchable: true },
        { targets: '_all', searchable: false }
    ]
});