Answers

• kthorngren Posts: 21,342Questions: 26Answers: 4,954

  February 2022

  Looks correct in this example. You have a styling issue specific to your page. We will need to see the problem to help debug. Please post a link to your page or a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Make sure you have all the correct js and css library files for the styling framework you are using. Use the Download Builder for this.

  Kevin
• David7 Posts: 6Questions: 3Answers: 0

  February 2022

  Code:

   var dataTable = $("#tblReports").DataTable({
      data: data,
      columns: [
        { data: 'Id', name: 'Id', title: 'Id', autoWidth: true},
        { data: 'Title', name: 'Title', title: 'Nadpis' },
        { data: 'Subject', name: 'Subject', title: 'Text' },
        { data: 'PublishDateFrom', name: 'PublishDateFrom', title: 'Publikováno od', render: function(d) { return moment(d).format("DD.MM.YYYY")} },
        { data: 'PublishDateTo', name: 'PublishDateTo', title: 'Publikováno do', render: function(d) { return moment(d).format("DD.MM.YYYY")} },
        { data: null, title: '', orderable: false, render: function(data, type, full, meta) { return '<a style="width: 80px; margin-right: 5px;" class="btn btn-warning" href="Detail/' + full.Id + '">Upravit</a>' + '<a id="DeleteRecord" style="width: 80px;" class="btn btn-danger" href="Delete/' + full.Id + '" onclick="return (deleteRecordConfirmation(' + full.Id + '))">Smazat</a>'; } },
      ],
      dom: 'Bfrtip',
      buttons: [{
          extend: 'excelHtml5',
          exportOptions: { columns: [ 0, 1, 2, 3, 4 ] },
          title:      '',
          text:       'Excel',
  

  // text: '<i class="fa fa-file-excel-o"></i>',
  header: true,
  titleAttr: 'Excel9'
  },
  'pdfHtml5', 'csvHtml5',
  {
  extend: 'copyHtml5',
  exportOptions: { columns: [ 0, 1, 2, 3, 4 ] },
  text: 'Schránka',
  },
  {
  extend: 'print',
  exportOptions: { columns: [ 0, 1, 2, 3, 4 ] },
  text: 'Tisk',
  },
  ],
  });

  Imports
  "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css",
  "https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css",
  "https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css",
  "https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css",
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",

  "https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js",
  "https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js",
  
  "https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js",
  "https://cdn.datatables.net/fixedheader/3.2.1/js/dataTables.fixedHeader.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js",
  "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js",
  "https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js",
  "https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"
  

  If I remove
  "https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js",
  it thows error.

  Thank you
• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin