How to add buttons for each record, with angular-datatablejs?

Question

How to add buttons for each record, with angular-datatablejs?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have the following table that filled it this way

<div class="panel-body">
    <script type="text/javascript">
        jQuery(document).ready(function($)
        {
            $("#example-1").DataTable({
                "ajax": {
                "url": "http://162.222.100.163/proyecto/public/ws/usuarios",
                "dataSrc": "records"
                },
                "columns": [
                    { "data": "id" },
                    { "data": "nombre1" },
                    { "data": "nombre2" },
                    { "data": "apellido1" },
                    { "data": "apellido2" }
                ]
            });
        });
    </script>               
    <table id="example-1" class="table table-striped table-bordered " cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Usuario</th>
                <th>Tipo Usuario</th>
                <th>Accion</th>
            </tr>
        </thead>
        <tfoot>                                         
            <tr>
                <th>#</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Usuario</th>
                <th>Tipo Usuario</th>
                <th>Accion</th>
            </tr>
        </tfoot>
    </table>
</div>

the table works completely for me, search and page. But for each record I must add a button and it turns out that in the button, I must add the ng-click directive to open a modal. Is this possible. Thank you very much.

angularjs angular-datatables

asked by JG_GJ 06.03.2017 в 07:27

source

2 answers

0

Simply insert the button in a cell of the table for each row, this button asiganale ng-click a function that is in your controller, if you have to do something about the data in that column pass the id of the item. I do not know if you let me understand.

answered by 23.03.2017 в 18:24

Problems with DropDownList ASP MVC Get width and height of an external image with Javacript

score 1 · Accepted Answer

You need to add property columnDefs

$("#example-1").DataTable({
    "ajax": {
        //...
    },
    "columns": [
        //...
    ],
    columnDefs: [{
        targets: -1, //posición de la columna donde estara el boton
        data: null,
        className: "d-flex",
        orderable: false,
        searchable: false,
        defaultContent: "<a class='btn delete-data'>"
    }],
    drawCallback: (settings) => {
        $('.delete-data').click(()=>{
            //accion
        });
    }
});

You can see the location of this here