Formatting the output of datatable when there are

2020-02-02 03:17发布

站内问答 / jQuery
1798 0 5

I have a large data set (not extremely large). I am using the print selected option.

The output formatting is extremely bad. How do I fix it?

A bit of dataTable.js info My table also has a drop down filter By default, the export buttons (including Print) will automatically detect if any rows are selected (by the Select extension for DataTables) and only export the data from those selected rows. If no rows are selected, all rows will be exported.

If you wish to customise this behaviour, you can use the exportOptions object to determine what columns and rows are included in the printed data. A DataTables selector-modifier object can be given using the exportOptions.modifier option and has the ability to determine the order of the print table and if filtering rows are included, among other actions.

<!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>

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)