jQuery Datatables如何使用行分组打印表? [英] jQuery Datatables How to print a table with row grouping?
问题描述
几天来，我试图通过行分组来实现dataTable打印视图，但是仍然无法正常工作..:(
Few days i was trying to achieve a dataTable print view with a row grouping but still its not going to work.. :(
我有一个dataTable，其中一列是隐藏的，而该列是按行分组的.与此示例相同: https://datatables.net/examples/advanced_init/row_grouping.html
I have a dataTable, where one column is hidden and that column is row grouped. Same as in this example: https://datatables.net/examples/advanced_init/row_grouping.html
我正在使用Buttons Extension( https://datatables.net/extensions/buttons/)作为打印"按钮.当我按下打印"按钮时，我看到了dataTable的所有列，即使其中一列也应该被隐藏.然后我使用选项"columns"::visible"，只打印可见的列，但又不好，因为缺少分组行.
And i am using a Buttons Extension (https://datatables.net/extensions/buttons/) for Print button. And when i hit the print button, i see all the columns of my dataTable even the one column shoud be hidden. Then i used an option "columns": ":visible", to print only visible columns, but it's again not good, because the grouped row is missing.
那么有谁知道如何在打印"视图中以行分组作为原始dataTable来获得相同的表?
So does anyone know how to get the same table in Print view with row grouping as the original dataTable?
table = $('#vartTable').DataTable({
"dom": "Bt",
"paging": false,
"fixedHeader": {
"headerOffset": -10
},
"autoWidth": false,
"ordering": false,
"data": data,
"columns": [
{"data": "path",},
{
"data": "username",
"render": function(data, type, row) {
return '<a href="User-view.do?varId=' + row.id + '">' + row.username+ '</a>';
}
},
{
"data": "name",
"render": function (data, type, row) {
return row.name+ ' ' + row.surname;
}
},
{"data": "details"}
],
"columnDefs": [{"visible": false, "targets": 0}],
"buttons": [
{
"extend": 'print',
"title": "",
"text": 'Print current page',
"autoPrint": false,
"exportOptions": {
"columns": ':visible',
"modifier": {
"page": 'current'
}
}
}
],
"drawCallback": function () {
var api = this.api();
var rows = api.rows({page: 'current'}).nodes();
var last = null;
api.column(0, {page: 'current'}).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before('<tr><td colspan="3" class="group">' + group + '</td></tr>');
last = group;
}
});
}
});
推荐答案
Datatable不支持导出行摸索功能.您必须在datatables.buttons.js文件的__exportData函数中添加分组代码，以便在按如下所示进行导出之前将分组行添加到数据中
Exporting row groping is not supported feature in Datatable. you have to add your grouping code inside __exportData function in datatables.buttons.js file to add grouped rows to data before exporting as below
var grouped_array_index=config.grouped_array_index; //customised
var no_of_columns = header.length;
var no_of_rows = no_of_columns > 0 ? cells.length / no_of_columns : 0;
var body = new Array( no_of_rows );
var body_data = new Array( no_of_rows ); //customised
var body_with_nodes = new Array( no_of_rows ); //customised
var body_with_nodes_static = new Array( no_of_rows ); //customised
var cellCounter = 0;
for ( var i=0, ien=no_of_rows ; i<ien ; i++ ) {
var rows = new Array( no_of_columns );
var rows_with_nodes = new Array( no_of_columns );
for ( var j=0 ; j<no_of_columns ; j++ ) {
rows[j] = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
rows_with_nodes[j] = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
cellCounter++;
}
body[i] = rows;
body_data[i] = rows;
body_with_nodes[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
body_with_nodes_static[i] = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
}
//console.log(dt.rows().nodes());
/******************************************** GROUP DATA *****************************************************/
var row_array=dt.rows().nodes();
var row_data_array=dt.rows().data();
var iColspan =no_of_columns;
var sLastGroup = "";
var inner_html='',grouped_index;
var individual_group_array= new Array(),sub_group_array= new Array(),total_group_array= new Array();
var no_of_splices=0; //to keep track of no of element insertion into the array as index changes after splicing one element
for ( var i=0, row_length=body_with_nodes.length ; i< row_length; i++ ){
sub_group_array[i]= new Array();
individual_group_array[i]= new Array();
var sGroup='';
for(var k=0;k<grouped_array_index.length;k++){
sGroup = sGroup+''+row_data_array[i][grouped_array_index[k]]+' ';
inner_html=row_data_array[i][grouped_array_index[k]];
grouped_index=k;
individual_group_array[i][k]=row_data_array[i][grouped_array_index[k]];
sub_group_array[i][k]=sGroup;
}
total_group_array[i]=sGroup;
if ( sGroup !== sLastGroup ){
var table_data=[];
var table_data_with_node='';
for(var $column_index=0;$column_index<iColspan;$column_index++){
if($column_index===0){
table_data_with_node+='<td style="border-left:none;border-right:none">'+inner_html+'</td>';
table_data[$column_index]=inner_html+" ";
}
else{
table_data_with_node+='<td style="border-left:none;border-right:none"></td>';
table_data[$column_index]='';
}
}
body_with_nodes.splice(i+no_of_splices,0,$.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
body_data.splice(i+no_of_splices,0,table_data);
no_of_splices++;
sLastGroup = sGroup;
}
}
这篇关于jQuery Datatables如何使用行分组打印表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
