Архивы WEB - Страница 14 из 55

datatables.net: своя стилизация кнопок print и excel

03.03.2022 Павел Грибов WEB

Задача: кастомизировать внешний вид кнопок печати и экспорта, с выносом их в отдельный контейнер внизу экрана

Самый простой способ: отрисовка кнопок в своём контейнере, и навешивание эвента на их клик.

Определим CSS:

.hided {display:none}

1	.hided {display:none}

datatables.net:

при выводе кнопок, сразу их скрываем, чуть ниже навесим на них эвент

        buttons: [
            {
            text: 'Добавить клиента',
                action: function ( e, dt, node, config ) {
                    AddUserPhone.value="";
                    AddUserName.value="";
                    AddUserPassword.value="";
                    if (owner_select.value>0){
                        $("#AddClientModal").modal("show");  
                    } else {
                        ToastMessage("error","Внимание!","Вам необходимо выбрать владельца");
                    };                                        
                }
            },
            {
                extend: 'excelHtml5',
                text:"",
                className:"hided"
            },            
            {
                extend: 'print',
                className:"hided",
                text:"",
            }
        ],

buttons: [

{

text: 'Добавить клиента',

action: function ( e, dt, node, config ) {

AddUserPhone.value="";

AddUserName.value="";

AddUserPassword.value="";

if (owner_select.value>0){

$("#AddClientModal").modal("show");

} else {

ToastMessage("error","Внимание!","Вам необходимо выбрать владельца");

};

}

{

extend: 'excelHtml5',

text:"",

className:"hided"

{

extend: 'print',

className:"hided",

text:"",

}

Контейнер:

рисуем кнопки, и навешиваем на них стандартное срабатывание по onclick

<div id="export_buttons">
    <div class="dt-buttons btn-group flex-wrap"> 
        <button onclick='$(".buttons-excel")[0].click();' class="btn buttons-excel buttons-html5 btn-link d-flex align-items-center" tabindex="0" aria-controls="clientsgrid" type="button">
            <span><i class="icons i_excel me-2"></i> Excel</span>
        </button> 
        <button onclick='$(".buttons-print")[0].click();' class="btn buttons-print btn-link d-flex align-items-center" tabindex="0" aria-controls="clientsgrid" type="button">
            <span><i class="icons i_print me-2"></i> Печать</span>
        </button> 
    </div>    
</div>

<span><i class="icons i_excel me-2"></i> Excel</span>

</button>

<span><i class="icons i_print me-2"></i> Печать</span>

</button>

</div>

Результат:

Оставить комментарий datatbles.net, свои кнопки печати

Bootstrap 5: отслеживание переключения вкладок (табов)

22.02.2022 Павел Грибов WEB

Задача: отследить переключение вкладок пользователем

Решение:

var tabEl = document.querySelector('#myTab')
    tabEl.addEventListener('shown.bs.tab', function (e) {       
      atab=$(e.target).attr("id");
      console.log("--щелкнули по табу"+atab);        
    })

var tabEl = document.querySelector('#myTab')

tabEl.addEventListener('shown.bs.tab', function (e) {

atab=$(e.target).attr("id");

console.log("--щелкнули по табу"+atab);

})

Оставить комментарий bootstrap, click, tabs

DataTables.net: маленькие трюки

09.02.2022 Павел Грибов WEB

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

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

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

"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() ;
    });

<label for="TableSearch" class="col-form-label me-2">Поиск</label>

</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: [

<label class="me-3">Показать <select onchange="EzsGridList()" name="lengthtable" id="lengthtable" class="dataTable-selector">

</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'));

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);
    });

$('#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();

1	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
            },

"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;
   };
 });

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","Внимание!","Выберите сегмент для присвоения договора");  
              };

rows=segment_table.rows('.selected').data();

if (rows.length>0){

ShowDialogAttachAgreement(rows[0].id);

} else {

ToastMessage("error","Внимание!","Выберите сегмент для присвоения договора");

};

Оставить комментарий datatables.net

datatables.net: вынос кнопок экспорта в любое место

07.02.2022 Павел Грибов WEB

Задача: задать местоположение кнопок экспорта, назначить им собственный стиль

Решение:

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'));

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'));

Оставить комментарий datatbles, javascript

« 1 … 12 13 14 15 16 … 55 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

datatables.net: своя стилизация кнопок print и excel

Bootstrap 5: отслеживание переключения вкладок (табов)

Bootstrap: модальное окно в модальном

DataTables.net: маленькие трюки

datatables.net: вынос кнопок экспорта в любое место