The edit and delete buttons enable but do not open the modal for button action. Here's my json and d

klermann

The edit and delete buttons enable but do not open the modal for button action. Here's my json and dataTable script:

<script type="text/javascript">
    
    var editor; // use a global for the submit and return data rendering in the examples
     
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            "ajax": "/financeiro/receitas/listJson",
            "table": "#example",
            "fields": [ {
                   label: "Descrição:",
                   name: "descricaoReceita"
              }, {
                    label: "Data:",
                    name: "dataReceita"
                }, {
                    label: "Contas:",
                    name: "minhasContas"
                }, {
                    label: "Valor:",
                    name: "valorReceita"
                }
            ]
        } );
     
        $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url: "/financeiro/receitas/listJson",
                type: "GET"
            },
            serverSide: false,
            columns: [
                { mDataProp: "descricaoReceita" },
                { mDataProp: "dataReceita" },
                {
                    mRender: function (data, type, full){
                       return "'" + data.nome + "'";
                    },
                    sWidth: "200px",
                    sType: "String",
                    mDataProp: 'minhasContas',
                    //sDefaultContent: ''
                },
                { mDataProp: "valorReceita" }
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
    } );
    </script>

{
    "draw": 1,
    "recordsTotal": 13,
    "recordsFiltered": 13,
    "data": [{
        "descricaoReceita": "Entrada 1",
        "dataReceita": "Dec 8, 2016 12:00:00 AM",
        "valorReceita": 5000.00,
        "receitaFixa": true,
        "receitaFixaQuantidade": 1,
        "receitaFixaTempo": "SEMANAS",
        "repetirLancReceita": false,
        "pagamento": true,
        "tipoReceitas": [],
        "minhasContas": [{
            "nome": "Banco A",
            "dataAcesso": {},
            "saldoAnterior": 100.00,
            "saldoAtual": 59782.32,
            "saldoFinal": 46423.42
        }]
    }, {
        "descricaoReceita": "Entrada 2",
        "dataReceita": "Dec 28, 2016 12:00:00 AM",
        "valorReceita": 500.00,
        "receitaFixa": false,
        "receitaFixaQuantidade": 0,
        "repetirLancReceita": true,
        "repetirPorPeriodo": "SEMANAL",
        "pagamento": true,
        "tipoReceitas": [],
        "minhasContas": [{
            "nome": "Banco A",
            "dataAcesso": {},
            "saldoAnterior": 100.00,
            "saldoAtual": 59782.32,
            "saldoFinal": 46423.42
        }]
    }, {
        "descricaoReceita": "Entrada 3",
        "dataReceita": "Dec 22, 2016 12:00:00 AM",
        "valorReceita": 12.00,
        "receitaFixa": false,
        "receitaFixaQuantidade": 0,
        "repetirLancReceita": false,
        "pagamento": true,
        "tipoReceitas": [],
        "minhasContas": [{
            "nome": "Banco A",
            "dataAcesso": {},
            "saldoAnterior": 100.00,
            "saldoAtual": 59782.32,
            "saldoFinal": 46423.42
        }]
    }, {
        "descricaoReceita": "Entrada 4",
        "dataReceita": "Dec 20, 2016 12:00:00 AM",
        "valorReceita": 20.00,
        "receitaFixa": false,
        "receitaFixaQuantidade": 0,
        "repetirLancReceita": false,
        "pagamento": true,
        "tipoReceitas": [],
        "minhasContas": [{
            "nome": "Banco A",
            "dataAcesso": {},
            "saldoAnterior": 100.00,
            "saldoAtual": 59782.32,
            "saldoFinal": 46423.42
        }]
    }, {
        "descricaoReceita": "Item 90",
        "dataReceita": "Apr 2, 2017 12:00:00 AM",
        "valorReceita": 3000.00,
        "receitaFixa": false,
        "receitaFixaQuantidade": 0,
        "repetirLancReceita": false,
        "pagamento": true,
        "tipoReceitas": [],
        "minhasContas": [{
            "nome": "Banco A",
            "dataAcesso": {},
            "saldoAnterior": 100.00,
            "saldoAtual": 59782.32,
            "saldoFinal": 46423.42
        }]
    }]
}

allan

Could you change mDataProp to be data please?

Beyond that, do you get any error messages shown in your browser's developer console?

Thanks,
Allan

klermann

The error that appears in the console is this: = uncaught exception: Unable to find row identifier For more information, please refer to https://datatables.net/tn/14 (unknown)! Is the image this is:

allan

That suggests that Editor can't find the row identifier as suggested in that tech note. Since you don't have a DT_RowId property you need to specify where the unique identifier for the row is using idSrc. The tech note in the error message explains this and more.

Allan

klermann

Does my json have to come with the object id as well? Or setting the id in the script solves the problem?

allan

The id has to be in the object somewhere in order for Editor to be able to read it. You just need to tell Editor where it is in the object using the idSrc option.

Allan

klermann

I was able to bring the id in the Alan object, many thanks for now