Pagination alignment

David7

kthorngren

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

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

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