Position DataTable inside Bootstrap4 card and have pagination outside of card

oSIRus

Hey all,

I'm trying to position a dataTable inside a Bootstrap4 card-body (which is already working fine) but I want to have the pagination for that dataTable outside (below) the card.

I could only come up with the following which is sadly not working:

$('#searchResultsTable').DataTable({
        "dom": '<"upperCardHtml">t<"lowerCardHtml">p',
} );

$("div.upperCardHtml").html("<div class='col-7'><div class='card'><div class='card-header'><span data-feather='align-left' style='margin-bottom: 2px;'></span> &{'common.search.results'}</div><div class='card-body m-0 p-0'>");
$("div.lowerCardHtml").html("</div></div>");

Can someone please give me a hint?

Thank you!

Bindrid2

you may have a timing issue where you are trying to append to the div before its done being created.

Use preInit event handler to ensure its there before you append the html. It would look like

$(document).ready( function () {
  $(document).on( 'preInit.dt', function (e, settings) {
    
        $(".upperCardHtml").html("Hello");
        $(".lowerCardHtml").html("Goodbye");
  });
  
$('#example').DataTable({
        "dom": '<"upperCardHtml">t<"lowerCardHtml">p',
    } );
} );

as seen here: http://live.datatables.net/menokuja/1/edit

oSIRus

Thanks for the reply, but i get exactly the same results using the preInit event handler.

oSIRus

Ok, now I did it different, it looks ok now with this code:

$('#searchResultsTable').DataTable({
            "dom": 'tp',
            "pageLength": 2,
} );

$("#searchResultsTable_paginate").css("display", "none");
$("#pagination").append($("#searchResultsTable_paginate").html());

Pagination is the div where I want my pagination to be displayed.

BUT:
Pagination shows in my pagination div but clicking on page 2 for example doesn't do anything. The pagination just doesn't react.

bindrid

That is because you are copying the html but not the event handlers that go with it.
Try something like

$("#searchResultsTable_paginate").appendTo("#pagination");

oSIRus

It's working! Thank you very much!