添加" data-id"到datatables.js

时间:2016-12-05 00:20:10

标签: javascript jquery html datatables

可以这样做:

我要输入的数据我得到了一个使用json从servlet实现的方法,这非常完美。

问题是我想要添加到最后一个变量" data-id"

$('#tbl_bienSeleccionado').DataTable({
            destroy: true,
            "columnDefs": [
                {"className": "text-center", "targets": "_all"}
            ],
            "aaData": res.lista,                
            "columns": [
                {"data": "idbien"},
                {"data": "nombre"},
                {"data": "description"},
                {"data": "persona"},
                {"data": "ubicacion"},
                {"data": "estado"},
                {"data": "departamento"},
                {"data": "idbien", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {                          
                    $(nTd).html("<a href='javascript:;'  class='btn btn-danger  btn-circle remove' title='Agregar'><i class='fa fa-minus'></i></a>");    
                }
            ]
});

我需要添加:js data-id =&#39; res.lista.idbien&#39;进入td→结果html:

<td data-id='123" >
    <a href="javascript:;" class="btn btn-primary btn-circle edit" title="Editar">
        <i class="fa fa-edit"></i>
    </a>
</td>

1 个答案:

答案 0 :(得分:0)

你可以尝试这样的事情。有一个回调函数。你可以像这样在第8列插入一个html。

var edithtml = '<td data-id={id} >' +
                  '<a href="javascript:;" class="btn btn-primary btn-circle   edit" title="Editar">' +
        '<i class="fa fa-edit"></i>'+ 
    '</a>' +
'</td>'

$('#tbl_bienSeleccionado').DataTable({
            destroy: true,
            "columnDefs": [
                {"className": "text-center", "targets": "_all"}
            ],
            "aaData": res.lista,                
            "columns": [
                {"data": "idbien"},
                {"data": "nombre"},
                {"data": "description"},
                {"data": "persona"},
                {"data": "ubicacion"},
                {"data": "estado"},
                {"data": "departamento"}
            ],
          "fnRowCallback": function (nRow, data)
           {
                var id = data[0]; // 1st column in single row array         
                var replacedEditHtml = edithtml.replace("{id}", id); 
                $("td:eq(8)", nRow).html(replacedEditHtml); //replace 8th column
});