Как динамически добавить несколько пользовательских кнопок в один ряд? [JQuery Datatables] - PullRequest
0 голосов
/ 05 января 2019

Я использую API Datatables, но не могу добавить несколько кнопок в одну строку.

var table = $('#table_invdata').DataTable({
    "columnDefs": [{
        "targets": -1,
        "data": null,
        "defaultContent": 
           '<button class="btn-view" type="button">EDIT</button>'              
    }]  
});

Ответы [ 2 ]

0 голосов
/ 07 января 2019
<table id="table_invdata" class="table table-striped table-bordered">
<tr> 
<th>EmpID</th>
<th>EmpName</th>
<th>Email-id</th>
<th>Salary</th>
<th>Position</th>
<th></th>
</tr>
</table>
0 голосов
/ 05 января 2019

Попробуйте этот код

var table = $('#table_invdata').DataTable({
    "columnDefs": [{
        "targets": -1,
        "data": null,
        "defaultContent": 
           '<button class="btn-view" type="button">EDIT</button>'    
           + '<button class="btn-delete"  type="button">Delete</button>'          
    }]  
});

Или

var table = $('#table_invdata').DataTable({
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": 
               '<button class="btn-view" type="button">EDIT</button> <button class="btn-delete"  type="button">Delete</button>'          
        }]  
    });

Обновление:

Вы можете использовать функцию render с данными для обновления значений столбца.

<table class="table" id="datatable" >
    <thead>
        <tr>
            <th>Name </th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Код Jatery Datatable:

$('#datatable').DataTable ({
        "data" : FinalResult,
         "columns" : [
                { "data" : Name},
                { "data" : null,render: function ( data, type, row ) {
                            return '<button class="btn-view" type="button">EDIT</button>';
                        } },
                { "data" : null,render: function ( data, type, row ) {
                            return '<button class="btn-delete"  type="button">Delete</button>';
                        } }
                ]
            });

Fiddel Link : https://jsfiddle.net/jijomonkmgm/j6madey4/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...