Remove From My Forums

mdboot strap datatables pagination not working

Question

User81789783 posted

i have below code but it does not showing pagination ..does not showing any error

$(document).ready(function () {
  
    $('#dtBasicExample').DataTable({
        "pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
    });
    $('.dataTables_length').addClass('bs-select');
 })

<table id="dtBasicExample" class="table table-striped table-bordered table-sm">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                                                            <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                                                            <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
                                                          
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td scope="row">Task 1</td>
                                                            <td>1/1/2019</td>
                                                            <td>Complete</td>
                                                          
                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 2</td>
                                                            <td>4/4/2018</td>
                                                            <td>Complete</td>
                                                         
                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>
                                                          
                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>
                                                        <tr>
                                                            <td scope="row">Task 3</td>
                                                            <td>3/3/2018</td>
                                                            <td>In-Progress</td>

                                                        </tr>

                                                    </tbody>
                                                </table>

Monday, June 17, 2019 8:06 AM

All replies

User839733648 posted

Hi erum,

According to your description and code, I've made a test and it works well on my side.

I suggest that you could pay attention to the references of the js and css file.

You could refer to the two links to get the CDN.

MD Bootstrap CDN: https://mdbootstrap.com/md-bootstrap-cdn/

Bootstrap 4 DataTables CDN: https://cdn.datatables.net/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/js/mdb.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#dtBasicExample').DataTable({
                "pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
            });
        })
    </script>
</head>
<body>
    <table id="dtBasicExample" class="table table-striped table-bordered table-sm">
        <thead>
            <tr>
                <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
            </tr>
        </thead>
        <tbody>
              //data
        </tbody>
    </table>
</body>
</html>

result:

Best Regards,

Jenifer

Monday, June 17, 2019 10:07 AM

0

Sign in to vote

User81789783 posted

i need to have Datatables for mdboot strap

Monday, June 17, 2019 11:15 AM

User839733648 posted

Hi erum,

Do you mean that you want the style of datatable like that in this link: https://mdbootstrap.com/docs/jquery/tables/datatables/ ?

I've found the download of mdboot strap datatables from: https://mdbootstrap.com/docs/jquery/tables/datatables/#otpions-reference

I've applied that on my testing demo and it works well.

I suggest that you should pay attention to the order of the refereneces and do not lose any necessary reference.

Here is my testing code. You may follow the code and have a try.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">
    <!-- DataTables(Download to be local file)  -->
    <link href="MDB-Free_4.8.2/css/addons/datatables.min.css" rel="stylesheet" />
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/js/mdb.min.js"></script>
    <!-- DataTables(Download to be local file)  -->
    <script src="MDB-Free_4.8.2/js/addons/datatables.min.js"></script>
    </script>
        $(document).ready(function () {
            $('#dtBasicExample').DataTable({
                //"pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
            });
        })
    </script>
</head>
<body>
    <table id="dtBasicExample" class="table table-striped table-bordered table-sm">
        <thead>
            <tr>
                <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
            </tr>
        </thead>
        <tbody>
              //data
        </tbody>
    </table>
</body>
</html>

result:

Best Regards,

Jenifer

Tuesday, June 18, 2019 4:09 AM

Asked by:

mdboot strap datatables pagination not working

Question

All replies