Месяц: Февраль 2022

Небольшой сборник нужных трюков

1. Выделение цветом строки, по признаку

"createdRow": function( row, data, dataIndex ) {
            if (data.deleted == true ) {
                $(row).addClass('deleted');
            }
        },

2. Вынос кнопки «Поиск» в свой контейнер

 <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. Вынос кнопки «строк на странице» в свой контейнер

	<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. Вынос кнопок экспорта в свой контейнер

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. Отслеживание клика на строке таблицы

 $('#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. Перегрузка данных таблицы

table.ajax.reload();

7. Рендер своих данных для столбца

"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. Перебор всех загруженных данных таблицы

 params_ezs_table.rows().data().each(function(entry) {
   //console.log(entry)
   if (entry.id==id){
      param_ezs_value.value=entry.value;
   };
 }); 

9. Получение id выделенной строки

 rows=segment_table.rows('.selected').data(); 
              if (rows.length>0){
                ShowDialogAttachAgreement(rows[0].id);      
              } else {
                ToastMessage("error","Внимание!","Выберите сегмент для присвоения договора");  
              };