Table with sorting ... not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Table with sorting ... not working

Panos pro asked 7 years ago

Hi! I'm using the latest PRO version 4.4.3 and Bootstrap v4.0.0-beta.2 All the css and js files are linked, i added the extra css and script to head (from CDN as provided, and html exactly as provided), but the "Table with sorting" not working, it just shows a normal table. If i change the files with older (ex mdb 4.3.1) i achieve some functionality, but other items in my site collapse. So the <head> tags are: 
Starst your code here
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My Essay title </title>
    <link rel="icon" href="img/favicon.ico" type="image/gif" sizes="16x16">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mdb.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
    <link href="css/style.css" rel="stylesheet">

    <!-- For Table must be on head -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
</head>
and just before <body> close 
Start your code here
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
  P.S. and many other things (classes, or js effects are not working as they should be and provided. Changing the version, i have some functionality, but other things collapsing. Anyway!

Panos pro answered 7 years ago

So... with a workaround and with console.log(jQuery().jquery); at your site... i figured that you are using jquery-3.1.1 In the mdb PRO 4.3.3 you provide to use jquery-3.2.1 When i changed the version, it worked. But, the snippets code in WHICH version are working?

Mikołaj Smoleński staff answered 7 years ago

Hi Panos, Can You write clearly what is not working now on Your page? It's still sorting table? Regards

Panos pro answered 7 years ago

Hi, now the shorting table snippet is working, but AFTER i changed the jQuery version from 3.2.1 (which is provided with the 4.4.3 version of mdb) to jquery-3.1.1 (which is provided with the 4.3.2 version of mdb). So the main question is which version of mdb should we use?

Mikołaj Smoleński staff answered 7 years ago

You should use the latest version of MDB with the appropriate version of jQuery (for MDB 4.3.3 it is jQuery 3.2.1).

Your files should look like this:

 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/style.css" rel="stylesheet">

and before body closing tag:

 <!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="js/umd/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>

Regards

Mikołaj Smoleński staff commented 7 years ago

Also make sure that You have those files in css and js folders

Panos pro answered 7 years ago

With the above code many of snippets are not working, the table sorting is one of them.

Mikołaj Smoleński staff commented 7 years ago

Please send me Your code in zip file to m.smolenski@mdbootstrap.com. Regards

jkf pro commented 7 years ago

I have the same problem! Table is not sorting. Should I also sent you the code? Regards

Mikołaj Smoleński staff commented 7 years ago

Yes, please

jkf pro commented 7 years ago

I can't send you ZIP files. Your server refuses.

Panos pro answered 7 years ago

I would appreciate if you post the solution here, because i can't send my code. Thanks

Mikołaj Smoleński staff commented 7 years ago

First of all, are You sure jquery-3.2.1.min.js exists in Your js folder?

Panos pro commented 7 years ago

Positive https://imgur.com/a/IO1yO but i must link to 3.1.1 to get it work (i also put it in the js folder)

Mikołaj Smoleński staff commented 7 years ago

You should use jquery 3.2.1 Do You have any errors in console?

tozz pro answered 6 years ago

I have the same issue, I'm using MDB Pro. My code can be seen here (this is just the HTML, not all the additional files such as CSS/JS)

http://tozz.nl/temp/sortable.html

Table shows, but is not sortable.

Also, the code in the example (the working example) is not identical to the code shown in the 'HTML code' view on this page:

https://mdbootstrap.com/content/bootstrap-table-sort/

The content in thead is not the same. The working example has a class set that shows the up/down icons. The HTML code snippet does not have that.

 

Mikołaj Smoleński staff commented 6 years ago

Without ataching our js file, the sorting will not work. Please add them into Your page and then I could find out the solution

tozz pro commented 6 years ago

Please read my original post: "My code can be seen here (this is just the HTML, not all the additional files such as CSS/JS)" The index.html I posted is the modified version of the original index.html that comes with the MDB Pro ZIP file, downloaded yesterday. I'll send you an e-mail with a link to the ZIP

Mikołaj Smoleński staff commented 6 years ago

I can't find the solution for Your problem without attaching js files. Please add them or send Your zipped project directly to me: m.smolenski@mdbootstrap.com

Ollie Vincent pro answered 6 years ago

A year later and it still isn't fixed.

Added these two scripts and seems to work:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

Mikołaj Smoleński staff answered 6 years ago

Hi there Ollie,

The installation instruction is included in the Getting started tab on the main Datatables docs page: https://mdbootstrap.com/docs/jquery/tables/datatables/.

It works as an addon to the package.

Best regards

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
Panos
Pro User
10Support score
2Questions 4Answers
0Snippets likes 0Snippets