Datatables with AdminLTE theme

Datatables with AdminLTE theme

xdavidtxdavidt Posts: 8Questions: 2Answers: 0
edited March 2021 in Free community support

Link to test case: https://adminlte.io/themes/dev/AdminLTE/pages/tables/data.html
I start use Angular Datatables: https://l-lin.github.io/angular-datatables
It's just fork, and same using.
I try to use Datatables with my project and use the AdminLTE theme, but after saw the page search is broken, look again and made small research.
I found the AdminLTE is using <ul> to manage all pages, and each page is under tag of <li>.
When Datatables is working under <span> without any special tags.
Is there any way to cover my paging with this tags ?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,332Questions: 26Answers: 4,774

    but after saw the page search is broken,

    Are you referring to the search input at the top of the page? Not sure what that search is supposed to do but its not for Datatables.

    The second example has the Datatables search input and it works. The Datatables are initialized like this:

        $("#example1").DataTable();
        $('#example2').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
        });
    

    example2 is the top table and it does not have the Datatables search because of the searching option being disabled.

    Kevin

  • xdavidtxdavidt Posts: 8Questions: 2Answers: 0

    No, the search isn't the issue.
    Please review that screenshot: https://imgur.com/a/i0WPsfO
    The pages is coverd by ul and li

  • kthorngrenkthorngren Posts: 20,332Questions: 26Answers: 4,774
    Answer ✓

    The page is using Bootstrap4 styling. Here is the Datatables example with BS4 styling. You will find the same use of ul and li elements.

    Sorry, I don't understand the problem or what you are wanting to change.

    Kevin

  • xdavidtxdavidt Posts: 8Questions: 2Answers: 0

    OK, found the main issue, I was missing one libary:

    dataTables.bootstrap4.js

This discussion has been closed.