DataTables.net: маленькие трюки
Небольшой сборник нужных трюков
- Выделение цветом строки, по признаку
|
1 2 3 4 5 |
"createdRow": function( row, data, dataIndex ) { if (data.deleted == true ) { $(row).addClass('deleted'); } }, |
2. Вынос кнопки «Поиск» в свой контейнер
|
1 2 3 4 5 6 7 8 9 |
<label for="TableSearch" class="col-form-label me-2">Поиск</label> <div class="me-3"> <input type="text" id="TableSearch" class="form-control"> </div> ... oTable = $('#ezs_grid').DataTable(); $('#TableSearch').keyup(function(){ oTable.search($(this).val()).draw() ; }); |
3. Вынос кнопки «строк на странице» в свой контейнер
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<label class="me-3">Показать <select onchange="EzsGridList()" name="lengthtable" id="lengthtable" class="dataTable-selector"> <option selected="" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> строк </label> ... ezs_table=$('#ezs_grid').DataTable( { dom: 'rtipB', destroy: true, altEditor: true, "pageLength": lengthtable.value, "pagingType": "full_numbers", buttons: [ |
4. Вынос кнопок экспорта в свой контейнер
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var buttons = new $.fn.dataTable.Buttons(table, { buttons: [ { text:"Excel",extend: 'excel', className: 'excel_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } }, { text:"Print",extend: 'print', className: 'print_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } } ] }).container().appendTo($('#export_buttons')); |
5. Отслеживание клика на строке таблицы
|
1 2 3 4 5 6 7 |
$('#clientsgrid').on('dblclick', 'tbody td', function () { tr = $(this).closest('tr'); row = table.row( tr ); data=row.data(); user_id=data.id; console.log(user_id); }); |
6. Перегрузка данных таблицы
|
1 |
table.ajax.reload(); |
7. Рендер своих данных для столбца
|
1 2 3 4 5 6 7 8 |
"columns": [ { "data": null, render: function (data, type, row, meta) { console.log(row); return '<span onclick="EzsEdit('+row.id+')">E</span><span id="ezs_service_'+row.id+'" onclick="DeleteEzs('+row.id+')">D</span>'; }, disabled: true }, |
8. Перебор всех загруженных данных таблицы
|
1 2 3 4 5 6 |
params_ezs_table.rows().data().each(function(entry) { //console.log(entry) if (entry.id==id){ param_ezs_value.value=entry.value; }; }); |
9. Получение id выделенной строки
|
1 2 3 4 5 6 |
rows=segment_table.rows('.selected').data(); if (rows.length>0){ ShowDialogAttachAgreement(rows[0].id); } else { ToastMessage("error","Внимание!","Выберите сегмент для присвоения договора"); }; |