Архивы datatables.net

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: субгриды для таблицы

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

Задача: при щелчке по одной из ячеек, разворачивать «subgrid» для таблицы. Примерно так:

Решение:

<table id="ownersgrid" class="display" style="width:100%">
        <thead>
            <tr>                
                <th>#</th>
                <th></th>
                <th>Наименование</th>
                <th>Полное наименование</th>
                <th>Телефон</th>    
                <th>Email</th> 
                <th>Договора</th>
            </tr>
        </thead>
</table>

<script>
 ownerstable=$('#ownersgrid').DataTable( {
        dom: 'frtipB',
        destroy: true,
        select: true,
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 строк', '25 строк', '50 строк', 'Все строки' ]
        ],
        buttons: [            
            {
            text: 'Редактировать',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("edit");  
                }
            },
            {
            text: 'Добавить',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("add");  
                }
            },
            
            'excel','print','pageLength',
        ],        
         paging: true,
         keys: true,
         //scrollY:        400,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/owners/OwnersGrid",
            "type": "POST",
            "data": {               
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [                    
            { "data": "id"},
            { "data": "deleted" },
            { "data": "name"},
            { "data": "full_name" },
            { "data": "phone" },
            { "data": "email" },
            { className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},
        ]        
    } );
    $('#ownersgrid').unbind();
    $('#ownersgrid').on('dblclick', 'tbody td', function () {        
         OwnerEdit("edit");
    }); 
    $('#ownersgrid tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = ownerstable.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
        }
        else {
            // Open this row
            createChild(row);
            tr.addClass('shown');
        }
    } );    
function createChild ( row ) {
    // This is the table we'll convert into a DataTable
    var table = $('<table class="display" style="width:100%">'+
        '<thead>'+
        '    <tr>                '+
        '        <th>#</th>'+
        '        <th></th>'+
        '        <th>Наименование</th>'+
        '        <th>Полное наименование</th>'+
        '        <th>Телефон</th>    '+
        '        <th>Email</th> '+
        '        <th>Договора</th>'+
        '    </tr>'+
       ' </thead>'+
    '</table>');


    // Display it the child row
    row.child( table ).show();
 
    // Initialise as a DataTable
    var usersTable = table.DataTable( {
       dom: 't',
        destroy: true,
        select: true,
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 строк', '25 строк', '50 строк', 'Все строки' ]
        ],
        buttons: [            
            {
            text: 'Редактировать',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("edit");  
                }
            },
            {
            text: 'Добавить',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("add");  
                }
            },
            
            'excel','print','pageLength',
        ],        
         paging: true,
         keys: true,
         //scrollY:        400,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/owners/OwnersGrid",
            "type": "POST",
            "data": {               
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [                    
            { "data": "id"},
            { "data": "deleted" },
            { "data": "name"},
            { "data": "full_name" },
            { "data": "phone" },
            { "data": "email" },
            { className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},
        ]        
    } );
};
function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().destroy();
 
    // And then hide the row
    row.child.hide();
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<thead>

<tr>

<th>Наименование</th>

<th>Полное наименование</th>

<th>Телефон</th>

<th>Email</th>

<th>Договора</th>

</tr>

</thead>

</table>

ownerstable=$('#ownersgrid').DataTable( {

dom: 'frtipB',

destroy: true,

select: true,

lengthMenu: [

[ 10, 25, 50, -1 ],

[ '10 строк', '25 строк', '50 строк', 'Все строки' ]

buttons: [

{

text: 'Редактировать',

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

ConnectorEdit("edit");

}

{

text: 'Добавить',

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

ConnectorEdit("add");

}

'excel','print','pageLength',

paging: true,

keys: true,

//scrollY: 400,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/owners/OwnersGrid",

"type": "POST",

"data": {

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "name"},

{ "data": "full_name" },

{ "data": "phone" },

{ "data": "email" },

{ className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},

]

} );

$('#ownersgrid').unbind();

$('#ownersgrid').on('dblclick', 'tbody td', function () {

OwnerEdit("edit");

});

$('#ownersgrid tbody').on('click', 'td.dt-control', function () {

var tr = $(this).closest('tr');

var row = ownerstable.row( tr );

if ( row.child.isShown() ) {

// This row is already open - close it

destroyChild(row);

tr.removeClass('shown');

}

else {

// Open this row

createChild(row);

tr.addClass('shown');

}

} );

function createChild ( row ) {

// This is the table we'll convert into a DataTable

var table = $('<table class="display" style="width:100%">'+

'<thead>'+

' <tr> '+

' <th>#</th>'+

' <th></th>'+

' <th>Наименование</th>'+

' <th>Полное наименование</th>'+

' <th>Телефон</th> '+

' <th>Email</th> '+

' <th>Договора</th>'+

' </tr>'+

' </thead>'+

'</table>');

// Display it the child row

row.child( table ).show();

// Initialise as a DataTable

var usersTable = table.DataTable( {

dom: 't',

destroy: true,

select: true,

lengthMenu: [

[ 10, 25, 50, -1 ],

[ '10 строк', '25 строк', '50 строк', 'Все строки' ]

buttons: [

{

text: 'Редактировать',

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

ConnectorEdit("edit");

}

{

text: 'Добавить',

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

ConnectorEdit("add");

}

'excel','print','pageLength',

paging: true,

keys: true,

//scrollY: 400,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/owners/OwnersGrid",

"type": "POST",

"data": {

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "name"},

{ "data": "full_name" },

{ "data": "phone" },

{ "data": "email" },

{ className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},

]

} );

};

function destroyChild(row) {

var table = $("table", row.child());

table.detach();

table.DataTable().destroy();

// And then hide the row

row.child.hide();

}

</script>

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

datatables.net: перекашивает заголовок таблицы при переключении между вкладками

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

При переключении между вкладками, иногда шапка таблицы «узежает».

Решение: в момент переключения вкладок, «перерисовываем» шапку:

    $("#tabs").tabs({
	activate: function( event, ui ) { 
		$('#client_pays_grid').dataTable().fnAdjustColumnSizing();
   });

$("#tabs").tabs({

activate: function( event, ui ) {

$('#client_pays_grid').dataTable().fnAdjustColumnSizing();

});

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

Дошли руки до datatables.net

26.11.2021 Павел Грибов PHP, WEB

Наконец дошли руки до освоения плагина databales.net для работы с таблицами. До этого всё использовал jqgrid. Вот типичный шаблон c выгрузкой в excel, загрузкой данных из json, добавления в POST своих данных, получения id выделенной строки.

HTML:

<table id="clientsgrid" class="display" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th></th>
                <th>Телефон</th>
                <th>ФИО</th>
                <th>Email</th>
                <th>Дата</th>
            </tr>
        </thead>
    </table>

<thead>

<tr>

<th>Телефон</th>

<th>Email</th>

</tr>

</thead>

</table>

Javascript:

 function ClientsGridList(){

    table=$('#clientsgrid').DataTable( {
        dom: 'Bfrtip',
        destroy: true,
        select: true,
        buttons: [
            'excel','print'
        ],        
         paging: true,
         keys: true,
        //scrollY:        200,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/clients/ClientsGrid",
            "type": "POST",
            "data": {
                "owner":owner_select.value,
                "segment":users_groups_array_select.value
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [
            { "data": "id"},
            { "data": "deleted" },
            { "data": "phone"},
            { "data": "name" },
            { "data": "email" },
            { "data": "dt"}            
        ]        
    } );
    $('#clientsgrid').unbind();
    $('#clientsgrid').on('dblclick', 'tbody td', function () {
         tr = $(this).closest('tr');
         //console.log(tr);
         row = table.row( tr );
         data=row.data();
         user_id=data.id;         
         DrawCartUser(user_id);
    }); 
   // table.ajax.reload();
  };

function ClientsGridList(){

table=$('#clientsgrid').DataTable( {

dom: 'Bfrtip',

destroy: true,

select: true,

buttons: [

'excel','print'

paging: true,

keys: true,

//scrollY: 200,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/clients/ClientsGrid",

"type": "POST",

"data": {

"owner":owner_select.value,

"segment":users_groups_array_select.value

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "phone"},

{ "data": "name" },

{ "data": "email" },

{ "data": "dt"}

]

} );

$('#clientsgrid').unbind();

$('#clientsgrid').on('dblclick', 'tbody td', function () {

tr = $(this).closest('tr');

//console.log(tr);

row = table.row( tr );

data=row.data();

user_id=data.id;

DrawCartUser(user_id);

});

// table.ajax.reload();

};

PHP:

$owner= _POST("owner"); // владелец (если суперадмин - выводим всех)
$segment= _POST("segment"); // какой сегмент (если -1, выводим всех)
$draw= _POST("draw"); // какая страница
$start= _POST("start"); // с какой записи по счету
$length= _POST("length"); // записей на страницу
$order= _POST("order")[0]["column"]; // по какой колонке сортируем
$order= _POST("columns")[$order]["data"];
$sidx= _POST("order")[0]["dir"]; // способ сортировки
$search_value=_POST("search")["value"]; // что ищем
$search_regex=_POST("search")["regex"]; // регулярка

$res=$Users->GetClientsGrid($Users,$owner,$segment,$start,$length,$order,$sidx,$search_value);    
if ($res->error):
        echo '{"error": "'.$res->errortext.'" }';
        die();
   else:
        $res->result->draw=$draw;
        jsonExit($res->result);
endif;

$owner= _POST("owner"); // владелец (если суперадмин - выводим всех)

$segment= _POST("segment"); // какой сегмент (если -1, выводим всех)

$draw= _POST("draw"); // какая страница

$start= _POST("start"); // с какой записи по счету

$length= _POST("length"); // записей на страницу

$order= _POST("order")[0]["column"]; // по какой колонке сортируем

$order= _POST("columns")[$order]["data"];

$sidx= _POST("order")[0]["dir"]; // способ сортировки

$search_value=_POST("search")["value"]; // что ищем

$search_regex=_POST("search")["regex"]; // регулярка

$res=$Users->GetClientsGrid($Users,$owner,$segment,$start,$length,$order,$sidx,$search_value);

if ($res->error):

echo '{"error": "'.$res->errortext.'" }';

die();

else:

$res->result->draw=$draw;

jsonExit($res->result);

endif;

Ну и получается что то вроде:

Оставить комментарий datatables.net, типичный шаблон таблицы

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
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