У меня большой набор данных (не очень большой).Я использую выбранную опцию печати.
Форматирование вывода очень плохое.Как это исправить?
Немного информации dataTable.js В моей таблице также есть раскрывающийся фильтр. По умолчанию кнопки экспорта (включая «Печать») автоматически определяют наличие строк.выбран (расширением Select для DataTables) и экспортировать данные только из этих выбранных строк.Если строки не выбраны, все строки будут экспортированы.
Если вы хотите настроить это поведение, вы можете использовать объект exportOptions, чтобы определить, какие столбцы и строки включены в печатаемые данные.Объект селектора-модификатора DataTables может быть задан с помощью опции exportOptions.modifier и может определять порядок таблицы печати и, если фильтрация строк включена, среди других действий.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<table id="example" class="stripe compact row-border hover" width="100%"></table>
<script>
dataSet = [
["2019-02-05T08:25:08.816Z", "David", "Thorson", "AT&T", "david@gmail.com", "", "Message to be typed here", "Telephoned, Returned your call, Will call you, Quote Needed", "Paper", "Mike", "James, Mike", "", "\nMike - TESTED", "", "", ""],
["2019-02-06T15:00:56.923Z", "David", "Thorson", "AT&T", "david@gmail.com", "", "Message to be typed here", "Telephoned, Returned your call, Will call you, Quote Needed", "Paper", "Mike", "James, Mike", "", "\nMike - OK", "", "", ""],
["2019-02-06T19:39:19.476Z", "cd", "", "", "", "275-9288", "", "Quote Needed", "", "Mike", "Chris", "", "\nMike - OK", "", "", ""],
["2019-02-06T20:15:31.693Z", "Jo", "blanc", "", "", "275-6855", "call about stone", "Please call, Quote Needed", "", "Mike", "Chris", "", "\nMike - OK", "", "", ""],
["2019-02-06T23:47:47.663Z", "Dave", "bell", "", "", "285-8958", "", "Returned your call", "", "Mike", "Chris", "", "\nMike - OK", "", "", ""],
["2019-02-13T17:51:05.793Z", "jo", "Helize", "Helize Concrete & Rentals", "becrete@shaw.ca", "274-9288", "Need to talk", "Telephoned", "", "Mike", "Chris", "", "\nMike - OK", "", "", ""],
["2019-02-16T01:17:12.255Z", "Miss", "Helize", "", "", "276-1082", "", "Please call", "", "Mike", "Rob", "", "\nMike - OK", "", "", ""],
["2019-02-16T01:18:51.176Z", "Bob", "smith", "", "", "278-8989", "", "Please call", "", "Mike", "Rob", "", "\nMike - OK", "", "", ""],
["2019-02-19T16:53:00.730Z", "gate", "", "north west fencing", "", "807 472 5055", "", "Telephoned, Please call", "", "Mike", "Jo", "", "\nMike - OK", "", "", ""],
];
const dataTable = $('#example').DataTable({
data: dataSet,
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
text: 'Print all',
exportOptions: {
modifier: {
selected: null
}
}
},
{
extend: 'print',
text: 'Print selected'
}
],
select: true,
ordering: false,
"pageLength": 100,
columns: [{
title: "Date"
}, {
title: "Fname"
}, {
title: "Lname"
}, {
title: "Company"
}, {
title: "Email"
}, {
title: "Phone"
}, {
title: "Message"
}, {
title: "Priority"
}, {
title: "Source"
}, {
title: "Assigned"
}, {
title: "By"
}, {
title: "Info"
}, {
title: "SMS"
}, {
title: "Completion"
}, {
title: "CRM Number"
}, {
title: "Notes"
}],
initComplete: function() {
const table = this.api();
table.columns().every(function() {
const title = $(this.header()).text();
$(this.header()).html(`<select><option value="">${title} (All)</option></select>`);
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '');
$(this.header()).find('select').append(options);
});
}
});
$('#example').on('change', 'thead select', event => dataTable.column($(event.target).closest('th')).search($(event.target).val()).draw());
</script>
</body>
</html>